Button

Button is a beautiful component that comes in several sizes and colors.

Basic Example

This demo shows a basic button with a primary color.

Accessibility notes

Buttons in this demo have visible text, so they are accessible by default.
For icon-only buttons, always provide an accessible label using text or aria-label.
For more, see WCAG 2.1: Name, Role, Value.

Code Example

Basic.vue

Components

Button is a standalone component.

Button

Button Props	Type	Description
is	string	Allows changing the element tag.
type	string	Sets the `type` attribute. Can be `button`, `submit` or `reset`.
join	boolean	Use inside Join to group items together.
ghost	boolean	Enables the ghost style on the button.
link	boolean	Enables the link style on the button.
glass	boolean	Enables the glass style on the button.
outline	boolean	Enables the outline style on the button.
dash	boolean	Enables the dash style on the button.
soft	boolean	Softens the button color
color	string	Sets the color to one of the below prop names. See Color for more information.
neutral	boolean	Sets the color to neutral.
primary	boolean	Sets the color to primary.
secondary	boolean	Sets the color to secondary.
accent	boolean	Sets the color to accent.
info	boolean	Sets the color to info.
success	boolean	Sets the color to success.
warning	boolean	Sets the color to warning.
error	boolean	Sets the color to error.
active	boolean	Enables the active style on the button.
disabled	boolean	Disables the button both visually and functionally.
loading	boolean	Styles the button with a loading indicator.
noAnimation	boolean	Removes all animation from the button.
shape	string	Sets the button shape to one of the below prop names. See Shape for more information.
circle	boolean	Sets the button shape to circle.
square	boolean	Sets the button shape to square.
wide	boolean	Sets the button shape to wide.
block	boolean	Sets the button shape to block.
size	string	Sets the size. Can be set to one of the below size prop names. See Size for more information.
xl	boolean	Sets the size to `xl`.
lg	boolean	Sets the size to `lg`.
md	boolean	Sets the size to `md` (the default).
sm	boolean	Sets the size to `sm`.
xs	boolean	Sets the size to `xs`.

The Button component is designed to handle accessibility out of the box: it uses the correct roles, keyboard event handling, and ARIA attributes for both native <button> and custom elements. Disabled states are communicated to assistive technology, and keyboard users can activate custom buttons using Space or Enter.

However, some responsibilities remain for you as a developer:

Icon-only buttons: Always provide an accessible label using text or aria-label so screen readers can announce their purpose.
Color contrast: Ensure text and icon color has sufficient contrast with the background in all states (WCAG 2.1: Contrast (Minimum)).
Focus indicator: All buttons must have a visible focus indicator for keyboard users. Do not remove focus outlines unless you provide a visible alternative.
Name, Role, Value: For more, see WCAG 2.1: Name, Role, Value.

Examples

Color

Set the color of the button using one of the color props.

Code Example

Color.vue

Outline

Use the outline prop to change the look of the button.

Code Example

Outline.vue

Ghost

Use the ghost prop to make the button look invisible until hovered over. The ghost style does not have color variant props.

Code Example

Ghost.vue

Ghost Text Color

Create colorful ghost buttons using text-${color} classes:

Code Example

ColorfulGhostText.vue

Ghost Background Color

Create colorful ghost backgrounds by setting hover:bg-${color} and hover:text-${color}-content classes on the button.

Code Example

ColorfulGhostBackground.vue

Link

Use the link to give the button a text-only appearance. Using a color prop with link will style the text color instead of the background color.

Code Example

Link.vue

Glass

Use the glass prop to give the button a text-only appearance. The glass style does not have color variant props.

Code Example

Glass.vue

Size

Use one of the size props to set the size of the button:

Code Example

Size.vue

Shape

Use one of the shape props to set the shape of the button to circle, square, wide, or block.

Code Example

Shape.vue

Circle

Circle buttons use the circle prop to create circular icon buttons in various sizes.

Code Example

Circle.vue

Square

Square buttons use the square prop to create perfectly square icon buttons in various sizes.

Code Example

Square.vue

Wide

Wide buttons use the wide prop to create wider buttons.

Code Example

Wide.vue

Block

Block buttons use the block prop to create buttons that span the full width of their container.

Code Example

Block.vue

Icon Buttons

The default styles put icons and text next to each other in a row. This example uses the NuxtIcon plugin for the icon component.

Code Example

Icon.vue

Button States

Button states indicate the current condition of the button. Buttons can have an active appearance (by adding the active class) or a disabled appearance (by adding the disabled class).

Active

Use the active prop to show the button's active style. Note that buttons indicating UI state (info, success, warning, and error) as well as glass and outline buttons do not have active states.

Normal State

Active State

Code Example

Active.vue

Disabled

Use the disabled prop to disable the button.

Code Example

Disabled.vue

Loading

You can show loading indicators using the new Loading component inside of buttons. The Loading element must be manually sized to fit.

Code Example

Loading.vue

No Animation

Use the no-animation prop to disable click animation.

Code Example

NoAnimation.vue

Prev Bundle Size

Next Dropdown