Houzz UI

Usage

Button comes with solid, outline, outline-filled, raised, and link variants. Use the variant prop to change the appearance of the button.

import { Button } from '@houzz/ui';

<HorizontalStack>
    <Button variant="solid">Solid Button</Button>
    <Button variant="outline">Outline Button</Button>
    <Button variant="outline-filled">Outline Filled Button</Button>
    <Button variant="raised">Raised Button</Button>
    <Button variant="link">Link Button</Button>
</HorizontalStack>

<HorizontalStack>
    <Button variant="solid">Solid Button</Button>
    <Button variant="outline">Outline Button</Button>
    <Button variant="outline-filled">Outline Filled Button</Button>
    <Button variant="raised">Raised Button</Button>
    <Button variant="link">Link Button</Button>
</HorizontalStack>

Size

Use the size prop to select from available size variants.

Color

Using houzz-ui's semantic color names, you can apply a subset of colorVariant to any variant. The values available for Button are accent, neutral, danger, and autoMate.

Button with Icon

An Icon can render to the left or right of the Button text.

Button states

Button's can be disabled or loading

Buttons as anchor

Passing a href prop will make the button be rendered as an <a> tag.

Icon Buttons

Helper to render round buttons and optional (recommended) tooltip

Buttons on dark background

Often times, sections on pages can have a dark background. We have not built a inverse colorVariant into Button yet. For the time being, use <InverseButton/>. InverseButton only has one colorVariant (neutral) and 2 variants (outline and link)

Pill Button

Set shape="pill" to get rounded / pill / bubble shaped buttons

Custom styles with `psuedo` props

In certain situations, the available variants will not suffice. Button styles can be overridden using houzz-ui system and psuedo props:

_active
_hover
_focus

Note: It is important to provide all 3 to have proper focus/active styling. Otherwise, you may observe odd side effects from the existing specificty defined in the default Button component. This focus state for outline and raised variants can get messy. Please review with design to make sure color contrast makes sense and "on brand"

Props

Button

System Props

COMMON
TYPOGRAPHY
BORDER
LAYOUT
POSITION
FLEX
GRID
Learn More

Name	Type	Description
`size`	`"small" \| "medium" \| "large"`	Button size. Default to medium. `medium`
`gradient`	`ResponsiveValue<ReactText, Required<Theme<ReactText>>>`	-
`iconBtnSize`	`"small" \| "medium" \| "large"`	-
`shape`	`"default" \| "pill"`	The shape of the button `default`
`$colorVariant`	`"accent" \| "neutral" \| "danger" \| "autoMate"`	-
`colorVariant`	`"accent" \| "neutral" \| "danger" \| "autoMate"`	Color from semantic color list `accent`
`variant`	`"link" \| "solid" \| "outline" \| "outline-filled" \| "raised"`	Predefined button style. Default to primary. `href ? 'link' : 'solid'`
`icon`	`ReactNode`	Icon name or component.
`$iconAlign`	`"end" \| "start"`	-
`isActive`	`boolean`	For "pressed" state. Will take :hover styles. Can be used for showing a menu button or button within ButtonGroup is active `false`
`isBlock`	`boolean`	Is block button or not. Default to be inline-block button. `false`
`isDisabled`	`boolean`	Is button disabled or not. `false`
`isLoading`	`boolean`	If true, will display a loading state and disable button. `false`
`href`	`string`	If href is passed in, will render as an <a /> link with button styling.
`iconAlign`	`"end" \| "start"`	Align icon at the start or end within the btn. `start`
`target`	`string`	Open links in new tab. Only valid for anchor (when href is provided)
`_active`	`SystemStyleObject`	css:active psudeo class overrides `{}`
`_focus`	`SystemStyleObject`	css:focus psudeo class overrides `{}`
`_hover`	`SystemStyleObject`	css:hover psudeo class overrides `{}`
`forwardAs`	`"symbol" \| "object" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| ... 157 more ... \| FunctionComponent<...>`	-
`$isBlock`	`boolean`	-
`$activeProps`	`CssFunctionReturnType`	-
`$focusProps`	`CssFunctionReturnType`	-
`$hoverProps`	`CssFunctionReturnType`	-

Accessibility

When Button has focus, Space and Enter activates it.
If an href is passed, <Button/> will render as an anchor (<a/>)

ButtonHealthy