Alert

A neo-brutalist style alert component for displaying status messages, supporting 7 color variants.

Demo

Preview

默认

这是一条默认提示信息。

主要

这是一条重要提示信息。

危险

这是一条危险警告信息。

可关闭的提示

点击右上角的 × 按钮可以关闭此提示。

存储空间不足

您的存储空间已使用 90%，请及时清理或升级。

Installation

pnpm dlx brutx-vue@latest add alert

Usage

<script setup>
import { Alert, AlertTitle, AlertDescription } from 'brutx-ui-vue'
</script>

<template>
    <Alert variant="default">
        <AlertTitle>Heads up!</AlertTitle>
        <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
    </Alert>
</template>

Variants

Variant	Description
default	Standard background with foreground text
primary	Primary (coral) background
secondary	Secondary (mint) background
success	Success (green) background
warning	Warning (yellow) background
danger	Destructive (red) background
info	Info (blue) background

<script setup>
import { Alert } from 'brutx-ui-vue'
</script>

<template>
    <Alert variant="success">Operation completed successfully.</Alert>
    <Alert variant="danger">Failed to save changes.</Alert>
    <Alert variant="info">A new version is available.</Alert>
</template>

With Icon

Alert supports placing icons via SVG child elements. The icon is absolutely positioned on the left side:

<script setup>
import { Alert, AlertTitle, AlertDescription } from 'brutx-ui-vue'
import { Terminal } from '@lucide/vue'
</script>

<template>
    <Alert variant="default">
        <Terminal class="h-5 w-5" />
        <AlertTitle>Terminal</AlertTitle>
        <AlertDescription>Run commands in your terminal.</AlertDescription>
    </Alert>
</template>

Closable Alert

Use the closable prop to render a close button in the top-right corner of the alert (using the Button component with variant="ghost" size="icon"). Clicking the button triggers the close event. When closable is enabled, the alert automatically adds right padding (pr-12) to prevent content from overlapping with the button.

<script setup>
import { ref } from 'vue'
import { Alert, AlertTitle, AlertDescription } from 'brutx-ui-vue'

const visible = ref(true)

function handleClose() {
    visible.value = false
}
</script>

<template>
    <Alert v-if="visible" variant="info" closable @close="handleClose">
        <AlertTitle>Closable Alert</AlertTitle>
        <AlertDescription>Click the x button in the top-right corner to close this alert.</AlertDescription>
    </Alert>
</template>

Action Buttons

Use the actions named slot to add an action button area below the alert content. The slot content is rendered in a flex container with spacing (mt-3 flex items-center gap-2).

<script setup>
import { Alert, AlertTitle, AlertDescription, Button } from 'brutx-ui-vue'
</script>

<template>
    <Alert variant="warning">
        <AlertTitle>Storage Space Low</AlertTitle>
        <AlertDescription>Your storage is 90% full. Please clean up or upgrade soon.</AlertDescription>
        <template #actions>
            <Button variant="primary" size="sm">Upgrade Now</Button>
            <Button variant="outline" size="sm">Remind Later</Button>
        </template>
    </Alert>
</template>

API Reference

Alert

Alert — Props

Name	Type	Default	Description
variant	"danger-subtle" | "danger" | "default" | "info-subtle" | "info" | "primary-subtle" | "primary" | "secondary-subtle" | "secondary" | "success-subtle" | "success" | "warning-subtle" | "warning" | undefined	"default"	Controls the alert’s visual variant, including its border, foreground, and background colors.
Details Declared type NonNullable<"default" | "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "primary-subtle" | "secondary-subtle" | "warning-subtle" | "danger-subtle" | "success-subtle" | "info-subtle" | null | undefined> | undefined Literal values "danger-subtle" "danger" "default" "info-subtle" "info" "primary-subtle" "primary" "secondary-subtle" "secondary" "success-subtle" "success" "warning-subtle" "warning" Default value details Declaration 'default' Source: packages/ui/src/components/alert/Alert.vue Resolved value "default" Source Alert.vue:17 packages/ui/src/components/alert/Alert.vue
closable	boolean | undefined	false	Shows a close button in the top-right corner. Clicking it emits close.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/alert/Alert.vue Resolved value false Source Alert.vue:19 packages/ui/src/components/alert/Alert.vue
class	string | undefined	undefined	Additional CSS classes merged into the alert root element.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/alert/Alert.vue Resolved value undefined Source Alert.vue:20 packages/ui/src/components/alert/Alert.vue

Alert — Events

Name	Signature or type	Description
@close	[]	Emitted without a payload when the close button of a closable alert is clicked.
Details Declared type [] Source Alert.vue packages/ui/src/components/alert/Alert.vue

Alert — Slots

Name	Signature or type	Description
#default	{}	The main alert content, typically a title, description, or other custom content.
Details Declared type {} Source Alert.vue packages/ui/src/components/alert/Alert.vue
#actions	{}	An optional action area. When provided, its content appears below the main alert content.
Details Declared type {} Source Alert.vue packages/ui/src/components/alert/Alert.vue

AlertDescription

AlertDescription — Props

Name	Type	Default	Description
id	string | undefined	—	Sets the description element’s DOM id. If omitted, the component generates an id; when nested in Alert, that id is registered for aria-describedby.
Details Declared type string | undefined Default value details Not declared — Source AlertDescription.vue:8 packages/ui/src/components/alert/AlertDescription.vue
class	string | undefined	—	Additional CSS classes merged into the description element.
Details Declared type string | undefined Default value details Not declared — Source AlertDescription.vue:9 packages/ui/src/components/alert/AlertDescription.vue

AlertDescription — Slots

Name	Signature or type	Description
#default	{}	The alert description. When nested in Alert, its DOM id is included in the root’s aria-describedby relationship.
Details Declared type {} Source AlertDescription.vue packages/ui/src/components/alert/AlertDescription.vue

AlertTitle

AlertTitle — Props

Name	Type	Default	Description
as	AsTag | Component | undefined	"h5"	Selects the HTML element or Vue component used to render the title. The default is h5.
Details Declared type AsTag | Component | undefined Literal values "a" "button" "div" "form" "h2" "h3" "img" "input" "label" "li" "nav" "ol" "p" "span" "svg" "template" "ul" Default value details Declaration 'h5' Source: packages/ui/src/components/alert/AlertTitle.vue Resolved value "h5" Source AlertTitle.vue:8 packages/ui/src/components/alert/AlertTitle.vue
asChild	boolean | undefined	undefined	Merges the title props, styles, and slot content into its single child; the child determines the rendered element when enabled.
Details Declared type boolean | undefined Literal values false true Default value details Declaration undefined Source: packages/ui/src/components/alert/AlertTitle.vue Resolved value undefined Source AlertTitle.vue:10 packages/ui/src/components/alert/AlertTitle.vue
class	string | undefined	undefined	Additional CSS classes merged into the title element.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/alert/AlertTitle.vue Resolved value undefined Source AlertTitle.vue:11 packages/ui/src/components/alert/AlertTitle.vue

AlertTitle — Slots

Name	Signature or type	Description
#default	{}	The title text or other title content.
Details Declared type {} Source AlertTitle.vue packages/ui/src/components/alert/AlertTitle.vue

Accessibility

• ARIA Role: The component automatically sets role="alert" to ensure screen readers can identify and announce alert content
• Keyboard Interaction: The close button of a closable alert supports Tab focus, Enter/Space to trigger close
• Focus Management: The close button has a visible focus indicator, meeting keyboard navigation standards
• Semantic Structure: AlertTitle renders as an h5 heading element by default, providing a clear content hierarchy