Alert - Nuxt UI

Usage

Pass a title to your Alert.

title

Heads up!

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

Description

You can add a description in addition of the title.

description

Heads up!

You can add components to your app using the cli.

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

Icon

Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name} or change it globally in ui.alert.default.icon.

description

Heads up!

You can add components to your app using the cli.

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

Avatar

Use the avatar prop as an object and configure it with any of its props.

description

Heads up!

You can add components to your app using the cli.

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

color can be any color from the ui.colors object or white (default).
variant can be solid (default), outline, soft or subtle.

color

variant

Heads up!

You can add components to your app using the cli.

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

Close

Use the close-button prop to hide or customize the close button on the Alert.

You can pass all the props of the Button component to customize it through the close-button prop or globally through ui.alert.default.closeButton.

It defaults to null which means no close button will be displayed. A close event will be emitted when the close button is clicked.

Heads up!

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

Actions

Use the actions prop to add actions to the Alert.

Like for closeButton, you can pass all the props of the Button component plus a click function in the action but also customize the default style for the actions globally through ui.alert.default.actionButton.

Heads up!

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

Actions will render differently whether you have a description set.

Heads up!

You can add components to your app using the cli.

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

Slots

`title` / `description`

Use the #title and #description slots to customize the Alert.

This can be handy when you want to display HTML content. To achieve this, you can define those slots and use the v-html directive.

Heads up!

You can add components to your app using the cli.

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

`icon`

Use the #icon slot to customize the displayed icon.

Customize Alert Icon

Insert custom content into the icon slot!

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

`avatar`

Use the #avatar slot to customize the displayable avatar.

Customize Alert Avatar

Insert custom content into the avatar slot!

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

`actions`

Use the #actions slot to add custom user interaction elements.

Props

{ wrapper?: string; inner?: string; title?: string; description?: string; descriptionOnly?: string; actions?: string; shadow?: string; rounded?: string; padding?: string; gap?: string; icon?: DeepPartial<{ base: string; }, any>; avatar?: DeepPartial<{ base: string; size: AvatarSize; }, any>; color?: DeepPartial<{ white: { solid: string; }; }, any>; variant?: DeepPartial<{ solid: string; outline: string; soft: string; subtle: string; }, any>; default?: DeepPartial<{ color: string; variant: string; icon: any; closeButton: any; actionButton: { size: ButtonSize; color: ButtonColor; variant: ButtonVariant; }; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }

{}

color

AlertColor

config.default.color

"primary""white""red""orange""amber""yellow""lime""green""emerald""teal""cyan""sky""blue""indigo""violet""purple""fuchsia""pink""rose"

variant

AlertVariant

config.default.variant

"solid""outline""soft""subtle"

icon

string

config.default.icon

avatar

Avatar

null

title

string

null

description

string

null

actions

AlertAction[]

[]

closeButton

Button

config.default.closeButton as unknown as Button

Config

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

Accordion

Display togglable accordion panels.

Avatar

Display an image that represents a resource or a group of resources.