🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Alert

A prominent notification banner that displays important information to users.

Alerts are used to communicate information that requires the user's attention but doesn't necessarily require immediate action. They can convey success messages, warnings, errors, or general information. Alerts are typically displayed inline within the page content and remain visible until dismissed or the condition changes.

Example

Heads up!

You can add components to your app using the cli.

"use client"

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

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

Installation


npm install @strongtie/design-system

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

Components

This module exports the following components:

Alert
AlertContent
AlertTitle
AlertDescription

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,
  AlertContent,
  AlertDescription,
  AlertTitle,
} from "@strongtie/design-system/alert"
import { MdNotificationsNone } from "react-icons/md"

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

Destructive

Error

Your session has expired. Please log in again.

"use client"

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

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

Styling

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

Base Class

alert

Variants

variant (default: default)

Value	Classes
`default`	`(none)`
`destructive`	`-destructive`

Component Slots

The following data attributes are used to identify component parts:

alert
alert-content
alert-description
alert-title

Additional Classes

Other CSS classes used by this component:

alert-content
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 Base Class Variants Component Slots Additional Classes Accessibility

Contribute

Alert

A prominent notification banner that displays important information to users.

Example

Heads up!

You can add components to your app using the cli.

"use client"

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

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

Installation


npm install @strongtie/design-system

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

Components

This module exports the following components:

Alert
AlertContent
AlertTitle
AlertDescription

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,
  AlertContent,
  AlertDescription,
  AlertTitle,
} from "@strongtie/design-system/alert"
import { MdNotificationsNone } from "react-icons/md"

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

Destructive

Error

Your session has expired. Please log in again.

"use client"

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

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

Styling

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

Base Class

alert

Variants

variant (default: default)

Value	Classes
`default`	`(none)`
`destructive`	`-destructive`

Component Slots

The following data attributes are used to identify component parts:

alert
alert-content
alert-description
alert-title

Additional Classes

Other CSS classes used by this component:

alert-content
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 Base Class Variants Component Slots Additional Classes Accessibility

Contribute