Button

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

Import

import { Button } from '@unllamas/lacrypta-ui';

Usage

<Button>Button</Button>

Button Sizes

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

<Button size='md'>Button</Button>
<Button size='sm'>Button</Button>
<Button size='xs'>Button</Button>

Button Variants

Use the variant prop to change the visual style of the Button. You can set the value to filled, bezeled, bezeledGray or borderless.

<Button variant='filled'>Button</Button>
<Button variant='bezeled'>Button</Button>
<Button variant='bezeledGray'>Button</Button>
<Button variant='borderless'>Button</Button>

Button Colors

The color property receives primary, secondary, success, warning or error

<Button color='primary'>Button</Button>
<Button color='secondary'>Button</Button>
<Button color='success'>Button</Button>
<Button color='warning'>Button</Button>
<Button color='error'>Button</Button>

Button loading state

Pass the loading prop to show its loading state. By default, the button will show a spinner and leave the button's width unchanged.

You can also pass the loadingText prop to show a spinner and the loading text.

<Button loading={true}>Button</Button>

Accessibility

• Button has role of button.
• When Button has focus, Space or Enter activates it.