Skip to content


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

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.


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

type'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info''primary'Button type.
size'xs' | 'sm' | 'md' | 'lg''md'Button size.
lightbooleanfalseDetermine whether it's a light button.
dashedbooleanfalseDetermine whether it's a dashed button.
shadowbooleanfalseShow button's shadow.
textbooleanfalseDetermine whether it's a text button.
tostringundefinedDetermine whether it's a link button.
roundedbooleanfalseDetermine whether it's a round button.
loadingbooleanfalseDetermine whether it's loading.
iconstringundefinedIcon's name.
disabledbooleanfalseDisable the button.

Button Slots

default()Customize default content.
icon()Customize icon component.

Button Group API

Button Group Props

type'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'''Control the size of buttons in this button-group.
size'xs' | 'sm' | 'md' | 'lg'''Control the size of buttons in this button-group.
spacerbooleanfalseThe dividing line between groups of buttons.

Button Group Slots

defaultButtonCustomize button group content.

MIT Licensed