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

Alert Dialog

Alert Dialog component for the Simpson Strong-Tie design system.

Example

"use client"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@strongtie/design-system/alert-dialog"
import { Button } from "@strongtie/design-system/button"

export function AlertDialogDefault() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Delete Account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Installation


npm install @strongtie/design-system

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

Components

This module exports the following components:

AlertDialog
AlertDialogPortal
AlertDialogOverlay
AlertDialogTrigger
AlertDialogContent
AlertDialogHeader
AlertDialogFooter
AlertDialogTitle
AlertDialogDescription
AlertDialogAction
AlertDialogCancel

Props

All components accept standard HTML attributes and React props.

Example

"use client"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@strongtie/design-system/alert-dialog"
import { Button } from "@strongtie/design-system/button"

export function AlertDialogDefault() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Delete Account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

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-dialog-action
alert-dialog-cancel
alert-dialog-content
alert-dialog-description
alert-dialog-footer
alert-dialog-header
alert-dialog-overlay
alert-dialog-title
alert-dialog-trigger

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Accordion Alert

On This Page

Example Installation Components Props Example Styling Classes Accessibility

Contribute

Alert Dialog

Alert Dialog component for the Simpson Strong-Tie design system.

Example

"use client"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@strongtie/design-system/alert-dialog"
import { Button } from "@strongtie/design-system/button"

export function AlertDialogDefault() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Delete Account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Installation


npm install @strongtie/design-system

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

Components

This module exports the following components:

AlertDialog
AlertDialogPortal
AlertDialogOverlay
AlertDialogTrigger
AlertDialogContent
AlertDialogHeader
AlertDialogFooter
AlertDialogTitle
AlertDialogDescription
AlertDialogAction
AlertDialogCancel

Props

All components accept standard HTML attributes and React props.

Example

"use client"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@strongtie/design-system/alert-dialog"
import { Button } from "@strongtie/design-system/button"

export function AlertDialogDefault() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Delete Account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

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-dialog-action
alert-dialog-cancel
alert-dialog-content
alert-dialog-description
alert-dialog-footer
alert-dialog-header
alert-dialog-overlay
alert-dialog-title
alert-dialog-trigger

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Accordion Alert

On This Page

Example Installation Components Props Example Styling Classes Accessibility

Contribute