Button

<Button>button</Button>

Installation

npx dotui-cli@latest add button

Usage

Button allow users to initiate an action or command with mouse, touch or keyboard interaction.
The button's label indicates the purpose of the action to the user. You may also include an icon for additional context.

Options

Variant

Use the variant prop to control the visual style of the button.
The default variant is "default".

<Button variant="default">default</Button>
<Button variant="primary">primary</Button>
<Button variant="outline">outline</Button>
<Button variant="quiet">quiet</Button>
<Button variant="success">success</Button>
<Button variant="warning">warning</Button>
<Button variant="danger">danger</Button>
<Button variant="accent">accent</Button>

Size

Use the size prop to control the size of the button.
The default size is "md".

<Button size="sm">Button</Button>
<Button size="md">Button</Button>
<Button size="lg">Button</Button>

Shape

Use the shape prop to control the shape of the button. The default variant is "rectangle".
Icon-only buttons should include an aria-label.

<Button shape="square"><UplaodIcon /></UplaodIcon>
<Button shape="circular"><UplaodIcon /></Button>

Prefix and suffix

To add additional context for a button label, such as a search icon next to the label for a search field submit, use the prefix and suffix props. Leading visuals always appear locked to the button label, even if the button is full width.

<Button prefix={<UplaodIcon />}>Upload</Button>
<Button suffix={<UplaodIcon />}>Upload</Button>

Pending

Use the isPending prop to control the loading state of the button, if you need to wait for a button's action to be completed.

<Button isPending>Button</Button>

Disabled

Use the isDisabled prop to disable the button.

<Button isDisabled>Button</Button>

Link button

To use a button as a link, use the href prop the button will automatically render a link that visually looks like a button.

<Button href="/login">Login</Button>

API Reference

Accessibility

Keyboard interactions