Button

Create a button with icon or link capabilities.

Usage

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

<template>
  <UButton>Button</UButton>
</template>

You can also use the label prop.

<template>
  <UButton label="Button" />
</template>

Style

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

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

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

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

Gray

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

Black

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

Size

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

<template>
  <UButton size="sm">Button</UButton>
</template>

Rounded

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

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

You can customize the whole preset by using the ui prop.

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.

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

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

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

Disabled

Use the disabled prop to disable the Button.

<template>
  <UButton disabled>Button</UButton>
</template>

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.

<template>
  <UButton loading>Button</UButton>
</template>

Block

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

<template>
  <UButton block>Button</UButton>
</template>

Link

Use the to prop to make the Button a link.

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

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.

<template>
  <UButton
    :padded="false"
    color="gray"
    variant="link"
    icon="i-heroicons-x-mark-20-solid"
  />
</template>

Square

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

<template>
  <UButton
    square
    label="Button"
    color="gray"
    variant="solid"
  />
</template>

Truncate

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

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

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

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

This can also work with an Input component for example:

<template>
  <UButtonGroup size="sm" orientation="horizontal">
    <UInput />
    <UButton icon="i-heroicons-clipboard-document" color="gray" />
  </UButtonGroup>
</template>

Slots

leading

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

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

trailing

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

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

Props

[Refer to the full props documentation in the source]

Config

[Refer to the full configuration documentation in the source]