Alert · Youj

Installation & usage

npm i @youj/react

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Use Alert for a condition that stays on the page until resolved or dismissed, such as a usage limit or failed payment. Use Toast for brief feedback, or Alert Dialog for a decision that must be made before continuing.

import { Alert, AlertAction, AlertDescription, AlertTitle, Button } from '@youj/react'

export function BandwidthAlert() {
  return (
    <Alert variant="warning" dismissible>
      <AlertTitle>You’ve used 82% of this month’s bandwidth</AlertTitle>
      <AlertDescription>Raise the limit or upgrade to avoid overage.</AlertDescription>
      <AlertAction>
        <Button size="sm">Upgrade</Button>
      </AlertAction>
    </Alert>
  )
}

The title is optional. A lone AlertDescription is enough for a one-line notice. AlertAction sets a button or two, or a link, under the message.

Description

A dismissible bandwidth warning with two actions; the card below glides up when it goes.

A set of alerts you can dismiss, with a button that resets them.

dismissible adds a dismiss button in the corner. The alert collapses through Collapse: its height eases to zero while the content fades out faster, so what follows glides up instead of jumping. If focus was inside the alert, it moves on to the next focusable element rather than dropping to the top of the page.

Passing onOpenChange also makes an alert dismissible. Control it with open to remember the choice or to bring the alert back.

import { useState } from 'react'
import { Alert, AlertDescription } from '@youj/react'

export function MaintenanceAlert() {
  const [open, setOpen] = useState(true)
  return (
    <Alert variant="info" open={open} onOpenChange={setOpen}>
      <AlertDescription>Maintenance on October 3, from 02:00 to 02:20 UTC.</AlertDescription>
    </Alert>
  )
}

Give an alert its spacing as a margin on the alert itself, such as className="mb-4", rather than as a gap on its parent. The margin collapses with the alert, so no empty gap is left behind.

Reference

Propsvariant, icon, dismissible… (7)

Props

Alert props
Prop	Type	Default
`variant`	`AlertVariant \| null` The severity: `info`, `success`, `warning` or `danger`, the name Button, Badge and the menus use. default 'info'	`'info'`
`icon`	`ReactNode \| false` Replace the variant's icon, or `false` for none.	–
`dismissible`	`boolean` Show a dismiss button. Implied by `onOpenChange`.	–
`open`	`boolean` Controlled visibility.	–
`defaultOpen`	`boolean` Uncontrolled initial visibility. default true	`true`
`onOpenChange`	`(open: boolean) => void` Called with `false` when dismissed.	–
`dismissLabel`	`string` Accessible name of the dismiss button. default "Dismiss"	`"Dismiss"`
Other props pass through: extends `ComponentProps<'div'>`.

AlertTitle, AlertDescription and AlertAction take the props of a div.

MotionIcon, dismiss, height, dismiss, content… · reduced motion

Motion

Motion tokens
Moment	Tokens	Value
Iconplays once as the alert mounts	no token each icon’s own choreography	each icon’s own choreography
Dismiss, heightwhat follows glides up	`duration.baseease.standard` 220ms · cubic-bezier(0.2, 0, 0, 1)	220mscubic-bezier(0.2, 0, 0, 1)
Dismiss, contentfades out ahead of the height	`duration.fastease.exit` 140ms · cubic-bezier(0.4, 0, 1, 1)	140mscubic-bezier(0.4, 0, 1, 1)
Reopenheight and content together	`duration.baseease.standard` 220ms · cubic-bezier(0.2, 0, 0, 1)	220mscubic-bezier(0.2, 0, 0, 1)

Reduced motion

Icons appear at rest. A dismissed alert leaves at once, and a reopened one appears at once.

An alert that mounts appears in place without expanding. Only its icon plays. The collapse animates height on purpose, because the content below has to move with it.

Reduced motion

The icon appears in its resting pose. A dismissed alert leaves at once, and the content below moves up in the same frame. The severity, the tint and the message don't change.

AccessibilityARIA, focus, announcements