Alert

Lockness UI Component

LLM DOCS:VIEW

DOCUMENTATION

Alert

Alert component for displaying important notifications, warnings, and status messages to users. Includes support for title, description, icons, and multiple visual variants. Fully customizable via CSS variables.

Installation

bash

deno run -A jsr:@lockness/ui add alert

Usage

tsx

import { Alert, AlertTitle, AlertDescription } from '@lockness/ui/components'

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

Components

Alert

The main alert container with variant styling.

tsx

<Alert variant='success' showIcon>
    <AlertTitle>Information</AlertTitle>
    <AlertDescription>Here's some useful information.</AlertDescription>
</Alert>

AlertTitle

The title of the alert message.

tsx

<AlertTitle>Important Notice</AlertTitle>

AlertDescription

The description or body text of the alert.

tsx

<AlertDescription>
    Your changes have been saved successfully.
</AlertDescription>

Props

AlertProps

Prop	Type	Default	Description
variant	`'default' \| 'success' \| 'warning' \| 'destructive'`	`'default'`	Visual style variant
showIcon	`boolean`	`false`	Show variant icon automatically
icon	`unknown`	-	Custom icon element (overrides default)
children	`unknown`	-	Alert content
class	`string`	-	Additional CSS class names
id	`string`	-	Element id attribute
role	`string`	`'alert'`	ARIA role for accessibility

AlertTitleProps

Prop	Type	Default	Description
children	`unknown`	-	Title content
class	`string`	-	Additional CSS class names

AlertDescriptionProps

Prop	Type	Default	Description
children	`unknown`	-	Description content
class	`string`	-	Additional CSS class names

Variants

Default

Standard alert with neutral styling for general messages.

tsx

<Alert showIcon>
    <AlertTitle>Note</AlertTitle>
    <AlertDescription>
        This is a general informational message.
    </AlertDescription>
</Alert>

Success

Green-styled alert for success messages.

tsx

<Alert variant='success' showIcon>
    <AlertTitle>Success!</AlertTitle>
    <AlertDescription>
        Your changes have been saved successfully.
    </AlertDescription>
</Alert>

Warning

Yellow/amber-styled alert for warning messages.

tsx

<Alert variant='warning' showIcon>
    <AlertTitle>Warning</AlertTitle>
    <AlertDescription>
        Your session will expire in 5 minutes.
    </AlertDescription>
</Alert>

Destructive

Red-styled alert for errors and critical messages.

tsx

<Alert variant='destructive' showIcon>
    <AlertTitle>Error</AlertTitle>
    <AlertDescription>
        Your session has expired. Please log in again.
    </AlertDescription>
</Alert>

With Icons

Use showIcon to display the default icon for each variant, or provide a custom icon.

tsx

// Default variant icon
<Alert variant='success' showIcon>
    <AlertTitle>Saved!</AlertTitle>
    <AlertDescription>Your profile has been updated.</AlertDescription>
</Alert>

// Custom icon
<Alert
    icon={
        <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'>
            <path d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z'/>
            <path d='m9 12 2 2 4-4'/>
        </svg>
    }
>
    <AlertTitle>Custom Icon</AlertTitle>
    <AlertDescription>This alert uses a custom icon.</AlertDescription>
</Alert>

Complete Example

tsx

// All variants with icons
<div class='space-y-4'>
    <Alert showIcon>
        <AlertTitle>Default</AlertTitle>
        <AlertDescription>A neutral informational message.</AlertDescription>
    </Alert>

    <Alert variant='success' showIcon>
        <AlertTitle>Success</AlertTitle>
        <AlertDescription>
            Your operation completed successfully!
        </AlertDescription>
    </Alert>

    <Alert variant='warning' showIcon>
        <AlertTitle>Warning</AlertTitle>
        <AlertDescription>Please review before proceeding.</AlertDescription>
    </Alert>

    <Alert variant='destructive' showIcon>
        <AlertTitle>Error</AlertTitle>
        <AlertDescription>
            Something went wrong. Please try again.
        </AlertDescription>
    </Alert>
</div>

CSS Variables

Customize the Alert component using these CSS variables in your theme:

css

@theme {
    /* Base Alert styling */
    --alert-padding: 1rem;
    --alert-border-radius: var(--radius);
    --alert-border-width: 1px;
    --alert-icon-size: 1.25rem;
    --alert-icon-gap: 0.75rem;
    --alert-title-font-size: 0.875rem;
    --alert-title-font-weight: 600;
    --alert-description-font-size: 0.875rem;

    /* Default variant */
    --alert-default-bg: var(--muted);
    --alert-default-fg: var(--foreground);
    --alert-default-border: var(--border);
    --alert-default-icon: var(--muted-foreground);

    /* Success variant */
    --alert-success-bg: oklch(95% 0.03 145);
    --alert-success-fg: oklch(35% 0.12 145);
    --alert-success-border: oklch(85% 0.08 145);
    --alert-success-icon: oklch(50% 0.15 145);

    /* Warning variant */
    --alert-warning-bg: oklch(95% 0.04 85);
    --alert-warning-fg: oklch(40% 0.12 60);
    --alert-warning-border: oklch(85% 0.10 85);
    --alert-warning-icon: oklch(55% 0.15 70);

    /* Destructive variant */
    --alert-destructive-bg: oklch(95% 0.03 25);
    --alert-destructive-fg: oklch(45% 0.15 25);
    --alert-destructive-border: oklch(85% 0.08 25);
    --alert-destructive-icon: oklch(55% 0.18 25);
}

Dark Mode

Override these variables in the .dark selector for dark mode:

css

.dark {
    /* Success variant - Dark mode */
    --alert-success-bg: oklch(25% 0.05 145);
    --alert-success-fg: oklch(80% 0.08 145);
    --alert-success-border: oklch(35% 0.06 145);
    --alert-success-icon: oklch(65% 0.12 145);

    /* Warning variant - Dark mode */
    --alert-warning-bg: oklch(25% 0.05 85);
    --alert-warning-fg: oklch(85% 0.10 85);
    --alert-warning-border: oklch(40% 0.08 80);
    --alert-warning-icon: oklch(70% 0.14 75);

    /* Destructive variant - Dark mode */
    --alert-destructive-bg: oklch(25% 0.05 25);
    --alert-destructive-fg: oklch(80% 0.10 25);
    --alert-destructive-border: oklch(40% 0.08 25);
    --alert-destructive-icon: oklch(65% 0.15 25);
}

DEFAULT ALERT

Heads up!

You can add components to your app using the CLI.

tsx

import { Alert, AlertTitle, AlertDescription } from '@lockness/ui/components'

<Alert showIcon>
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>
        You can add components to your app using the CLI.
    </AlertDescription>
</Alert>

DESTRUCTIVE ALERT

Error

Your session has expired. Please log in again.

tsx

<Alert variant="destructive" showIcon>
    <AlertTitle>Error</AlertTitle>
    <AlertDescription>
        Your session has expired. Please log in again.
    </AlertDescription>
</Alert>

ALL VARIANTS

Default

A neutral informational message.

Success

Your changes have been saved successfully.

Warning

Please review before proceeding.

Error

Something went wrong. Please try again.

tsx

<Alert showIcon>
    <AlertTitle>Default</AlertTitle>
    <AlertDescription>A neutral informational message.</AlertDescription>
</Alert>

<Alert variant="success" showIcon>
    <AlertTitle>Success</AlertTitle>
    <AlertDescription>Your changes have been saved.</AlertDescription>
</Alert>

<Alert variant="warning" showIcon>
    <AlertTitle>Warning</AlertTitle>
    <AlertDescription>Please review before proceeding.</AlertDescription>
</Alert>

<Alert variant="destructive" showIcon>
    <AlertTitle>Error</AlertTitle>
    <AlertDescription>Something went wrong.</AlertDescription>
</Alert>

Edit this page