Alert

Alert is a prominent message component that communicates important information to users.

Alerts are used to display contextual feedback messages for typical user actions, such as success confirmations, warnings, errors, or informational notices. They draw attention to important information without requiring user interaction, though they can be dismissible when appropriate. Alerts support different visual styles (variants) to convey the urgency and nature of the message, helping users quickly understand the severity and context of the information being presented.

Use alerts to provide feedback about the outcome of an action, warn users about potential issues, or highlight important information that requires attention. Alerts should be concise and actionable when possible, giving users clear next steps if applicable. Avoid using too many alerts on a single page as this can reduce their effectiveness and overwhelm users.

Example

Heads up!

You can add components to your app using the cli.

"use client"

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@strongtie/design-system/alert"
import { MdNotificationsNone } from "react-icons/md"

export function AlertDefault() {
  return (
    <Alert>
      <MdNotificationsNone />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the cli.
      </AlertDescription>
    </Alert>
  )
}

Installation


npm install @strongtie/design-system

import { Alert } from "@strongtie/design-system/alert"

Components

This module exports the following components:

Alert
AlertDescription
AlertTitle

Props

`<Alert>`

Prop	Type	Default	Description
`variant`	`"default" \| "destructive" \| null`	-

Examples

Heads up!

You can add components to your app using the cli.

"use client"

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@strongtie/design-system/alert"
import { MdNotificationsNone } from "react-icons/md"

export function AlertDefault() {
  return (
    <Alert>
      <MdNotificationsNone />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the cli.
      </AlertDescription>
    </Alert>
  )
}

Destructive

Error

Your session has expired. Please log in again.

"use client"

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@strongtie/design-system/alert"
import { MdErrorOutline } from "react-icons/md"

export function AlertDestructive() {
  return (
    <Alert variant="destructive">
      <MdErrorOutline />
      <AlertTitle>Error</AlertTitle>
      <AlertDescription>
        Your session has expired. Please log in again.
      </AlertDescription>
    </Alert>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

alert
alert-description
alert-title

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Alert Dialog Avatar

On This Page

Example Installation Components Props <Alert>Examples Destructive Styling Classes Accessibility

Contribute

Alert

Alert is a prominent message component that communicates important information to users.

Example

Heads up!

You can add components to your app using the cli.

"use client"

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@strongtie/design-system/alert"
import { MdNotificationsNone } from "react-icons/md"

export function AlertDefault() {
  return (
    <Alert>
      <MdNotificationsNone />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the cli.
      </AlertDescription>
    </Alert>
  )
}

Installation


npm install @strongtie/design-system

import { Alert } from "@strongtie/design-system/alert"

Components

This module exports the following components:

Alert
AlertDescription
AlertTitle

Props

`<Alert>`

Prop	Type	Default	Description
`variant`	`"default" \| "destructive" \| null`	-

Examples

Heads up!

You can add components to your app using the cli.

"use client"

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@strongtie/design-system/alert"
import { MdNotificationsNone } from "react-icons/md"

export function AlertDefault() {
  return (
    <Alert>
      <MdNotificationsNone />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the cli.
      </AlertDescription>
    </Alert>
  )
}

Destructive

Error

Your session has expired. Please log in again.

"use client"

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@strongtie/design-system/alert"
import { MdErrorOutline } from "react-icons/md"

export function AlertDestructive() {
  return (
    <Alert variant="destructive">
      <MdErrorOutline />
      <AlertTitle>Error</AlertTitle>
      <AlertDescription>
        Your session has expired. Please log in again.
      </AlertDescription>
    </Alert>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

alert
alert-description
alert-title

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Alert Dialog Avatar

On This Page

Example Installation Components Props <Alert>Examples Destructive Styling Classes Accessibility

Contribute