Button

Buttons let users trigger an action or event, such as submitting a form, confirming a choice, opening a dialog, or performing some other operation.

Styles

Buttons are not styled by default to avoid the need to reset styles for custom usages. solid, outline and ghost to set the appearance of the button.

Disabled

Add the disabled attribute to prevent a button from being clicked or focused, useful for actions that aren't currently available.

Loading

Add the aria-busy="true" attribute to indicating that the button is in a loading state.

Notice that the busy indicator is solely a feedback to the user that an operation is ongoing, it is still possible to invoke the buttons click handler.

Media

Buttons uses flexbox layout to neatly position icons.

Icon

Use the icon for buttons with only an icon.

Types

In addition to the button element, input elements with a type of button, submit and reset can be styled as a button using the classes solid, outline and ghost.

Chevron

You can inject a chevron icon to the trigger by adding the chevron class.