<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.

<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

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