<Button />

Button is the primary component for communicating actionable elements to users.

Usage

Use the variant prop to switch between button styles. Buttons support hover, active, and disabled states.

variant

filled

Outlined

base

hover

active

disabled

<Button variant='filled'>Filled</Button> <Button variant='outlined'>Outlined</Button>

Full width

Pass the fullWidth prop and the button will fill its container's width.

<Button fullWidth>Componentry</Button>

Icons

Pass a startIcon or endIcon to add a Button icon element.

<Button startIcon={<Icon id='github' />}>Componentry</Button>

Props

Name
Description
color

"primary"
disabled

boolean
endIcon

string | ReactElement
fullWidth

boolean
href

string
size

"small" | "large"
startIcon

string | ReactElement
variant

"filled" | "outlined"

TypeScript customization

You can use module augmentation to customize the TypeScript types for any of Button's props:

declare module 'componentry/types/components/Button/Button' { interface ButtonPropsOverrides { // ... overwrite any types for Button props ... } }

See the TypeScript guide for more information.

StylingButton styles

Class
Description
.C9Y-Button-base
.C9Y-Button-filled
.C9Y-Button-icon
.C9Y-Button-largeSize
.C9Y-Button-largeSizeIcon
.C9Y-Button-outlined
.C9Y-Button-smallSize
.C9Y-Button-smallSizeIcon