Icon Button

Displays a form input field or a component that looks like an input field.

Installation

CLI

Copy & Paste

bash

npx @sly-cli/sly add draft-ui icon-button

Examples

Default

The default IconButton uses variant solid and size md.

Info

When using an IconButton you should almost always use an aria-label. In some components, however, React Aria Components will automatically assign an aria-label to buttons.

Example

Code

Themes

You can use the variant prop to alter the button theme. Variants solid, outline, subtle, ghost, destructive, and link are included by default.

Example

Code

Sizes

You can use the size prop to alter the button size. Sizes xs, sm, md, and lg are included by default.

Example

Code

Disabled

Use the isDisabled prop to make the IconButton disabled.

Example

Code