component

TuxAlert

Wraps UAlert. Adds a 4px left border in the admonition's own color family — Docusaurus-style rhythm that Nuxt UI's subtle variant omits by default. important and compliance both lean on brand maroon but at different visual weights (subtle vs. solid).

all variants

Gallery

All 8 variants
Note
This is a note admonition. Left bar picks up the variant's color family.
Tip
This is a tip admonition. Left bar picks up the variant's color family.
Info
This is a info admonition. Left bar picks up the variant's color family.
Important
This is a important admonition. Left bar picks up the variant's color family.
Success
This is a success admonition. Left bar picks up the variant's color family.
Warning
This is a warning admonition. Left bar picks up the variant's color family.
Danger
This is a danger admonition. Left bar picks up the variant's color family.
Compliance
This is a compliance admonition. Left bar picks up the variant's color family.
<!-- renders all 8 variants with the same props shape -->
<tux-alert
  v-for="v in variants"
  :key="v"
  :variant="v"
  :title="v"
  :description="`This is a ${v} admonition.`"
/>

title only

Compact form

Omit description for a single-line admonition — good for inline heads-up messages in table cells or form fields.

Use `heading--bold` for section titles, not page chrome.
<tux-alert
  variant="tip"
  title="Use `heading--bold` for section titles, not page chrome."
/>

custom icon

Override icon

Saved to server
Pass any Lucide icon name via `icon` to override the variant default.
<tux-alert
  variant="info"
  icon="lucide:database"
  title="Saved to server"
  description="Pass any Lucide icon name via `icon` to override the variant default."
/>