Button UPDATED ​

Buttons allow the user to take actions or make choices.

Basic usage ​

Use type and light to define Button's style.

Disabled Button ​

The disabled attribute determines if the button is disabled.

Use disabled attribute to determine whether a button is disabled. It accepts a Boolean value.

Rounded Button ​

Use rounded-full shortcut of unocss or rounded attribute to define a rounded Button.

Dashed Button ​

Use dashed attribute to define a dashed style Button

Link Button ​

Use to attribute to specify the jump link.

Text Button ​

Use text to define Button's text style. Buttons without border and background.

Shadow Button ​

Use shadow to show Button's shadow.

Icon Button ​

Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.

Use the icon slots or icon property to add icon.

Button Group ​

Displayed as a button group, can be used to group a series of similar operations.

Use tag <o-button-group> to group your buttons.

Loading Button ​

Click the button to load data, then the button displays a loading state.

Set loading attribute to true to display loading state.

Sizes ​

Besides default size, Button component provides three additional sizes for you to choose among different scenarios.

Use attribute size to set additional sizes with xs, sm,md,lg.

Button API ​

Button Props ​

Button Slots ​

Button Group API ​

Button Group Props ​

Button Group Slots ​