Button

A component used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.

Anatomy

Mount all pieces together and create your Button

import { Button } from '@micode-ui/react';
 
<Button.Root>
  <Button.LeftIcon />
  Button Text
  <Button.RightIcon />
</Button.Root>;

Example

<Button>Hello World!</Button>

Button Variants

Use the variant prop to change visual styles of the Button. You can set the value to primary, secondary, tertiart or danger.

<Surface 
  css={{
    display: 'flex',
    gap: '$4'
  }}
>
  <Button variant='primary'>Primary</Button>
  <Button variant='secondary'>Secondary</Button>
  <Button variant='tertiary'>Tertiary</Button>
  <Button variant='danger'>Danger</Button>
</Surface>

Button Sizes

Use the size prop to change the size of the button. You can set the value to sm, md, or lg.

<Surface 
  css={{
    display: 'flex',
    gap: '$4',
    alignItems: 'center'
  }}
>
  <Button size='sm'>Small</Button>
  <Button size='md'>Medium</Button>
  <Button size='lg'>Large</Button>
</Surface>

Button States

Button have 3 "states", that you might find useful. They're loading, disabled and full. You can use them by simply passing the prop as seem in the example.

<Surface 
  css={{
    display: 'flex',
    gap: '$4',
    width: '80%'
  }}
>
  <Button loading>Loading</Button>
  <Button disabled>Disabled</Button>
  <Button full>Full</Button>
</Surface>

API Reference

Root

Contains all parts of the Button.

Prop	Type	Default
`variant`	`"primary" \| "secondary" \| "tertiary" \| "danger"`	`primary`
`size`	`"sm" \| "md" \| "lg"`	`md`
`as`	`ElementType`	No default value
`loading`	`boolean`	`false`
`disabled`	`boolean`	`false`
`full`	`boolean`	`false`

LeftIcon

A feedback icon that sits on the left side of the button.

Prop	Type	Default
`children`	`ReactNode`	No default value

RightIcon

A feedback icon that sits on the right side of the button.

Prop	Type	Default
`children`	`ReactNode`	No default value

Avatar Checkbox