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>

Props

Alert

Prop	Type	Default	Description
variant	'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'default'	Alert variant type
closable	boolean	false	Whether to show the close button
class	string	—	Custom CSS class

AlertTitle

Prop	Type	Default	Description
as	string | Component	'h5'	The rendered HTML element or component
asChild	boolean	—	Whether to pass props to the child element
class	string	—	Custom CSS class

AlertDescription

Prop	Type	Default	Description
class	string	—	Custom CSS class

Events

Alert

Event	Payload	Description
close	[]	Emitted when the close button is clicked

Slots

Alert

Slot	Scope	Description
default	—	Main content of the alert
actions	—	Action button area, rendered below the content

AlertTitle

Slot	Scope	Description
default	—	Title content

AlertDescription

Slot	Scope	Description
default	—	Description content

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