Alert

An inline message with a severity: an icon, the message, an optional AlertTitle, an action and a close control. role="alert" is announced at once; "status", politely.

Source

An inline message with a severity: an icon, the message, an optional AlertTitle, an action and a close control. role="alert" is announced at once; "status", politely. Every text is yours - the message, and the close control's name (closeLabel) - no built-in English.

import { Alert, AlertTitle } from '@soroush.tech/design-system/Alert'

;<Alert severity="success" onClose={dismiss} closeLabel="Dismiss">
  <AlertTitle>Saved</AlertTitle>
  Your changes are live.
</Alert>

Examples

Default

Your changes were saved.

const args: Partial<AlertProps> = { severity: 'info' }

<Alert {...args}>Your changes were saved.</Alert>

With Title

Saved

Your changes are live.

const args: Partial<AlertProps> = { severity: 'info' }

<Alert {...args} severity="success">
  <AlertTitle>Saved</AlertTitle>
  Your changes are live.
</Alert>

Severities

This is success.

This is info.

This is warning.

This is error.

const args: Partial<AlertProps> = { severity: 'info' }

<Flex gap={2}>
  {alertSeverityValues.map((severity) => (
    <Alert key={severity} {...args} severity={severity}>
      This is {severity}.
    </Alert>
  ))}
</Flex>

Variants

standard

contained

outlined

const args: Partial<AlertProps> = { severity: 'info' }

<Flex gap={2}>
  {alertVariantValues.map((variant) => (
    <Alert key={variant} {...args} variant={variant} severity="warning">
      {variant}
    </Alert>
  ))}
</Flex>

With An Action

The upload failed.

const args: Partial<AlertProps> = { severity: 'info' }

<Alert
  {...args}
  severity="error"
  action={
    <Button size="sm" variant="outlined" color="error">
      Retry
    </Button>
  }
>
  The upload failed.
</Alert>

Closable

Close me.

const args: Partial<AlertProps> = { severity: 'info' }

function Closable() {
  const [isOpen, setIsOpen] = useState(true)
  return isOpen ? (
    <Alert {...args} onClose={() => setIsOpen(false)} closeLabel="Dismiss">
      Close me.
    </Alert>
  ) : (
    <Button size="sm" variant="outlined" onClick={() => setIsOpen(true)}>
      Bring it back
    </Button>
  )
}
return <Closable />

Without An Icon

No icon, only the message.

const args: Partial<AlertProps> = { severity: 'info' }

<Alert {...args} icon={false}>
  No icon, only the message.
</Alert>