Alert

since 1.0

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

Example

Variant

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>
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

Alert
AlertDescription
AlertTitle

Props

`<Alert>`

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

Variants

variant

defaultdestructive

When not to use it

Don't use an alert for transient confirmations that disappear on their own — use a toast for those. Alerts are for persistent, in-page messages tied to surrounding content; if the message must interrupt the user or demand a decision, use a dialog instead.

Examples

Destructive

Variant

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>
  )
}

Alert Dialog Avatar

On This Page

Example Install Components Props <Alert>Variants When not to use it Examples Destructive

Contribute

Alert

since 1.0

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

Example

Variant

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>
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

Alert
AlertDescription
AlertTitle

Props

`<Alert>`

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

Variants

variant

defaultdestructive

When not to use it

Examples

Destructive

Variant

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>
  )
}

Alert Dialog Avatar

On This Page

Example Install Components Props <Alert>Variants When not to use it Examples Destructive

Contribute