Skip to main content

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).

Interactive Component Playground

TuxAlert Workbench

Presets:
Corridor Telemetry Advisory
Average vehicular throughput on I-35 southbound increased by 14.2% following adaptive signal retiming.
Properties Inspector5 configurable knobs
Alert Titletitle
Descriptiondescription
Variantvariant
Custom Iconicon
Closeable Dismiss Actionclose
false
Dynamic Component Syntax
<tux-alert title="Corridor Telemetry Advisory" description="Average vehicular throughput on I-35 southbound increased by 14.2% following adaptive signal retiming." variant="tip" />

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