Button - Nuxt UI

Usage

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

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

You can also use the label prop.

label

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Style

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

color

variant

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

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

variant

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Gray

variant

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Black

variant

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Size

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

size

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Rounded

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

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

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.

size

color

variant

trailing

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

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

size

color

variant

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Disabled

Use the disabled prop to disable the Button.

disabled

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

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.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Block

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

block

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Link

Use the to prop to make the Button a link.

target

Button

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

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.

padded

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Square

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

square

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Truncate

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

truncate

label

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

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

size

orientation

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

This can also work with an Input component for example:

size

orientation

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Slots

`leading`

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

label

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

`trailing`

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

label

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Props

any

{}

size

ButtonSize

config.default.size

"sm""2xs""xs""md""lg""xl"

type

string

"button"

replace

NuxtLinkProps

label

string

null

color

any

config.default.color

variant

ButtonVariant

config.default.variant

"link""solid""outline""soft""ghost"

icon

string

null

leadingIcon

string

null

trailingIcon

string

null

target

NuxtLinkProps

noRel

NuxtLinkProps

prefetch

NuxtLinkProps

noPrefetch

NuxtLinkProps

activeClass

NuxtLinkProps

exactActiveClass

NuxtLinkProps

prefetchedClass

NuxtLinkProps

ariaCurrentValue

NuxtLinkProps

external

NuxtLinkProps

RouteLocationRaw

href

RouteLocationRaw

rel

any

loadingIcon

string

config.default.loadingIcon

trailing

boolean

false

leading

boolean

false

disabled

boolean

false

block

boolean

false

boolean

false

padded

boolean

true

square

boolean

false

truncate

boolean

false

Config

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Breadcrumb

A list of links that indicate the current page's location within a navigational hierarchy.

Card

Display a card for content with a header, body and footer.