ui/docs/content/2.elements/3.button.md

github

github
true

Usage

Use the default slot to set the text of the Button.

::component-card

code: Button

Button ::

You can also use the label prop.

::component-card

props: label: Button

::

Style

Use the color and variant props to change the visual style of the Button.

::component-card

props: color: 'primary' variant: 'solid'

Button ::

Besides all the colors from the ui.colors object, you can also use the white and gray and black colors with their pre-defined variants.

White

::component-card

backgroundClass: 'bg-gray-50 dark:bg-gray-800' props: color: 'white' variant: 'solid' ui: variant: solid: 1 ghost: 1 excludedProps:

• color

---

Button ::

Gray

::component-card

props: color: 'gray' variant: 'solid' ui: variant: solid: 1 ghost: 1 link: 1 excludedProps:

• color

---

Button ::

Black

::component-card

props: color: 'black' variant: 'solid' ui: variant: solid: 1 link: 1 excludedProps:

• color

---

Button ::

Size

Use the size prop to change the size of the Button.

::component-card

props: size: 'sm'

Button ::

Icon

Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name}.

Use the leading and trailing props to set the icon position or the leadingIcon and trailingIcon props to set a different icon for each position.

::component-card

props: icon: 'i-heroicons-pencil-square' size: 'sm' color: 'primary' variant: 'solid' label: Button trailing: false excludedProps:

• icon

---

::

The label as prop or slot is optional so you can use the Button as an icon-only button.

::component-card

props: icon: 'i-heroicons-pencil-square' size: 'sm' color: 'primary' square: true variant: 'solid' excludedProps:

• icon
• square

---

::

Disabled

Use the disabled prop to disable the Button.

::component-card

props: disabled: true

Button ::

Loading

Use the loading prop to show a loading icon and disable the Button.

::component-card

props: loading: true

Button ::

Block

Use the block prop to make the Button fill the width of its container.

::component-card

props: block: true

Button ::

Link

Use the to prop to make the Button a link.

::component-card

props: to: 'https://volta.net' target: '_blank'

Button ::

Padded

Use the padded prop to remove the padding of the Button.

::component-card

props: padded: false baseProps: color: 'gray' variant: 'link' icon: 'i-heroicons-x-mark-20-solid'

::

Square

Use the square prop to force the Button to have the same padding horizontally and vertically.

::component-card

props: square: true baseProps: label: 'Button' color: 'gray' variant: 'solid'

::

Truncate

Use the truncate prop to truncate the label of the Button.

::component-card

props: truncate: true class: 'w-20' label: 'Button with a long text' excludedProps:

• class

---

::

Group

To stack buttons as a group, use the ButtonGroup component.

• To size all the buttons equally, pass the size prop
• To adjust the rounded or the shadow around buttons, customize with ui.buttonGroup.rounded or ui.buttonGroup.shadow

::component-card

props: size: 'sm' ui: size: xxs: '' xs: '' sm: '' md: '' lg: '' xl: '' code: |

#default :u-button{label="Action" color="white"} :u-button{icon="i-heroicons-chevron-down-20-solid" color="gray"} ::

Props

:component-props

Preset

:component-preset