Button

Usage

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

<UButton>Button</UButton>

You can also use the label prop.

<UButton label="Button" />

Style

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

<UButton color="primary" variant="solid" />

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

White

<UButton color="white" variant="solid" />

Gray

<UButton color="gray" variant="solid" />

Black

<UButton color="black" variant="solid" />

Size

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

<UButton size="sm" />

Rounded

To customize the border radius of the Button, you can use the ui prop.

<UButton :ui="{ rounded: 'rounded-full' }" />

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 leading-icon and trailing-icon props to set a different icon for each position.

<UButton icon="i-heroicons-pencil-square" size="sm" color="primary" variant="solid" label="Button" :trailing="false" />

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

<UButton icon="i-heroicons-pencil-square" size="sm" color="primary" square variant="solid" />

Disabled

Use the disabled prop to disable the Button.

<UButton disabled />

Loading

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

Use the loading-icon prop to set a different icon or change it globally in ui.button.default.loadingIcon. Defaults to i-heroicons-arrow-path-20-solid.

<UButton loading />

Block

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

<UButton block />

Link

Use the to prop to make the Button a link.

<UButton to="https://volta.net" target="_blank" />

You can also pass any property from the NuxtLink component such as target, exact, etc.

Padded

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

<UButton :padded="false" />

Square

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

<UButton square />

Truncate

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

<UButton truncate class="w-20" label="Button with a long text" />

Group

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

• To size all the buttons equally, pass the size prop
• To change the orientation of the buttons, set the orientation prop to vertical
• To adjust the rounded or the shadow around buttons, customize with ui.buttonGroup.rounded or ui.buttonGroup.shadow

<UButtonGroup size="sm" orientation="horizontal">
  <UButton label="Action" color="white" />
  <UButton icon="i-heroicons-chevron-down-20-solid" color="gray" />
</UButtonGroup>

Slots

leading

Use the #leading slot to set the content of the leading icon.

<UButton label="Button" color="gray">
  <template #leading>
    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" />
  </template>
</UButton>

trailing

Use the #trailing slot to set the content of the trailing icon.

<UButton label="Button" color="gray">
  <template #trailing>
    <UIcon name="i-heroicons-arrow-right-20-solid" />
  </template>
</UButton>

Props

Preset

undefined