Button

A button for actions. Pass to for an internal link or href for an external one. Hover and focus reveal an arrow: right when it stays on the site, up-right when it leaves.

Usage guidelines

Submit buttons: Unlike a native <button>, this component defaults to type="button". Pass type="submit" for it to submit a form.
Links: to renders a NuxtLink and shows an arrow right on hover. href renders an external link and shows an arrow up-right. A plain button uses the arrow right.

Anatomy

<UiButton>Submit</UiButton>

Examples

Rendering as another tag

The button can stay keyboard accessible as another tag, such as a div, with nativeButton set to false (and as if you need div instead of span).

<UiButton :native-button="false" as="div">
  Button that can contain complex children
</UiButton>

Button that can contain complex children

Links

<UiButton to="/method">Method</UiButton>
<UiButton href="https://example.com">Example</UiButton>

Loading states

For a button that goes into a loading state after activation, set focusableWhenDisabled so focus stays on it while disabled. Use aria-labelledby on a labeled child so the changing text is the accessible name.

Disabled

disabled sets data-disabled and ignores presses. Add focusableWhenDisabled if it should remain in the tab order.

API reference

Button

A button that triggers an action. Renders a <button> by default.

Prop	Type	Default	Description
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native type. Must be `submit` to submit a form.
`disabled`	`boolean`	—	Ignore presses. Sets `data-disabled` and `aria-disabled`.
`focusableWhenDisabled`	`boolean`	—	Keep the button focusable while disabled (for loading).
`nativeButton`	`boolean`	`true`	Render a native `<button>`. Set `false` when using `as`.
`as`	`'button' \| 'span' \| 'div'`	`'span'`	Tag to render when `nativeButton` is `false`.
`color`	`'blue' \| 'orange' \| 'pink' \| 'violet' \| 'green' \| 'cyan'`	—	Wash used for the fill. Omitted uses the neutral wash.
`cta`	`boolean`	`false`	Rest on the stronger wash step. `class="cta"` does the same.
`to`	`string`	—	Internal link. Hover shows an arrow right.
`href`	`string`	—	External link. Hover shows an arrow up-right.

There is no border. Hover and focus change the wash lightness. Extra attributes such as aria-labelledby fall through to the element.

Attribute	Description
`data-disabled`	Present when the button is disabled.