Button

Used to trigger actions and events. Y'know, like a button.

children

ReactNode

The content of the Button.

theme

Theme

The theme of the Checkbox.

size

Size

The size of the Checkbox.

variant

Variant

The variant of the Button.

disabled

boolean

Whether the Checkbox is disabled.

leadingIcon

ReactNode

Icon shown before the content.

trailingIcon

ReactNode

Icon shown after the content.

icon

ReactNode

Renders a uniformly shaped button with a centered icon. Children is used as alt-text

Examples

With Icons

You can use the leadingIcon and trailingIcon props to add icons before/after the button content.

These props accept any ReactNode, so you can use any icon library you want. If the icons are not being sized correctly, make sure there is no implicit width/height props on the icon, and try adding w-full h-full.

Pure Icon

For a button with only an icon, you can use the icon prop. This will render a button with a uniform size and shape, and the icon will be centered.

The children prop is used as the alt text for the icon, and will not be visible.

With InputGroup

You can use the Button component inside an InputGroup to create a segmented button. The InputGroup can be used with Input, Select and Button.

Learn more about InputGroup here ->.

Previous

Customization

Next

Checkbox