Nuxt UI v4 is officially released!

Components

Button

GitHub
Create a button with icon or link capabilities.

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.

{
  "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.

{
  "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

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

Gray

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

Black

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

Size

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

{
  "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.

{
  "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.

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

Disabled

Use the disabled prop to disable the Button.

{
  "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.

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

Link

Use the to prop to make the Button a link.

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.

{
  "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.

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

Truncate

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

{
  "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
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

This can also work with an Input component for example:

{
  "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.

{
  "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.

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

Props

ui
{ base?: string; font?: string; rounded?: string; truncate?: string; block?: string; inline?: string; size?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }, any>; gap?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }, any>; padding?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }, any>; square?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }, any>; color?: DeepPartial<{ white: { solid: string; ghost: string; }; gray: { solid: string; ghost: string; link: string; }; black: { solid: string; link: string; }; }, any>; variant?: DeepPartial<{ solid: string; outline: string; soft: string; ghost: string; link: string; }, any>; icon?: DeepPartial<{ base: string; loading: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; }, any>; default?: DeepPartial<{ size: string; variant: string; color: string; loadingIcon: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
size
ButtonSize
config.default.size
"sm""2xs""xs""md""lg""xl"
type
string
"button"
label
string
null
color
ButtonColor
config.default.color
"primary""white""gray""black""red""orange""amber""yellow""lime""green""emerald""teal""cyan""sky""blue""indigo""violet""purple""fuchsia""pink""rose"
variant
ButtonVariant
config.default.variant
"link""solid""outline""soft""ghost"
icon
string
null
leadingIcon
string
null
trailingIcon
string
null
target
"_blank" | "_parent" | "_self" | "_top" | (string & {})
to
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
activeClass
string
exactActiveClass
string
ariaCurrentValue
"time" | "page" | "step" | "location" | "date" | "true" | "false"
prefetchedClass
string
href
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
rel
any
loadingIcon
string
config.default.loadingIcon
replace
boolean
trailing
boolean
false
leading
boolean
false
noRel
boolean
prefetch
boolean
noPrefetch
boolean
external
boolean
disabled
boolean
false
truncate
boolean
false
block
boolean
false
square
boolean
false
loading
boolean
false
padded
boolean
true
ui
{ wrapper?: DeepPartial<{ horizontal: string; vertical: string; }, any>; rounded?: string; shadow?: string; orientation?: DeepPartial<{ 'rounded-none': { horizontal: { start: string; end: string; }; vertical: { start: string; end: string; }; }; 'rounded-sm': { horizontal: { start: string; end: string; }; vertical: { start: string; end: string; }; }; rounded: { horizontal: { start: string; end: string; }; vertical: { start: string; end: string; }; }; 'rounded-md': { horizontal: { start: string; end: string; }; vertical: { start: string; end: string; }; }; 'rounded-lg': { horizontal: { start: string; end: string; }; vertical: { start: string; end: string; }; }; 'rounded-xl': { horizontal: { start: string; end: string; }; vertical: { start: string; end: string; }; }; 'rounded-2xl': { horizontal: { start: string; end: string; }; vertical: { start: string; end: string; }; }; 'rounded-3xl': { horizontal: { start: string; end: string; }; vertical: { start: string; end: string; }; }; 'rounded-full': { horizontal: { start: string; end: string; }; vertical: { start: string; end: string; }; }; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
size
ButtonSize
null
"sm""2xs""xs""md""lg""xl"
orientation
"horizontal" | "vertical"
"horizontal"

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.