nili/ui
enfaartr
All components

Alert

Overview
11 exports7 variant axes17 props4 files
import { Alert, AlertAction } from '@nili/ui';

This is the library’s own overview page, rendered live. Switch the language or the theme in the header and it follows.

Statuses

Five meanings. error is announced assertively by default; the rest wait for a pause.

This is a error alert.
This is a warning alert.
This is a success alert.
This is a info alert.
This is a feature alert.
import { Alert } from "@nili/ui"

export function Example() {
  return (
    <>
      <Alert status="error" title="Something went wrong." />
      <Alert status="warning" title="Your trial ends in 3 days." />
      <Alert status="success" title="Payment received." />
      <Alert status="info" title="A new version is available." />
      <Alert status="feature" title="Try the new dashboard." />
    </>
  )
}

Appearances

Filled, Light, Lighter and Stroke. Filled is the loudest — keep it for things that genuinely interrupt.

Appearance: filled
Appearance: light
Appearance: lighter
Appearance: stroke
import { Alert } from "@nili/ui"

export function Example() {
  return (
    <>
      <Alert appearance="filled" status="info" title="Filled" />
      <Alert appearance="light" status="info" title="Light" />
      <Alert appearance="lighter" status="info" title="Lighter" />
      <Alert appearance="stroke" status="info" title="Stroke" />
    </>
  )
}

Sizes

X-Small is a single line with no icon padding; Large carries a description and actions.

x-small
Your changes have been saved.
small
Your changes have been saved.
large
Your changes have been saved.

Everyone on the team can see them now.

import { Alert } from "@nili/ui"

export function Example() {
  return (
    <>
      <Alert size="x-small" status="success" title="Saved." />
      <Alert size="small" status="success" title="Saved." />
      <Alert
        size="large"
        status="success"
        title="Saved."
        description="Your changes are live for everyone on the team."
      />
    </>
  )
}

Actions, icons and dismissal

actions takes up to two inline actions. icon accepts true for the default glyph, a node to replace it, or false to drop it. dismissible needs dismissLabel — an ✕ has no accessible name.

Your plan is almost full.

You have used 92% of your storage.

UpgradeLearn more
Introducing smart filters.
No icon at all.
Dismiss me.
import { Alert, Icon } from "@nili/ui"
import { RiSparkling2Line } from "@remixicon/react"

export function Example() {
  const [open, setOpen] = useState(true)

  return (
    <>
      <Alert
        status="warning"
        appearance="stroke"
        size="large"
        title={t('actions.planTitle')}
        description={t('actions.planBody')}
        actions={[
          { label: "Upgrade", href: "#" },
          { label: "Dismiss", onClick: () => setOpen(false) },
        ]}
        dismissible
        dismissLabel={t('close')}
        onDismiss={() => setOpen(false)}
      />

      {/* Custom icon */}
      <Alert
        status="feature"
        title={t('actions.feature')}
        icon={<Icon icon={RiSparkling2Line} />}
      />

      {/* No icon */}
      <Alert status="info" title="No icon." icon={false} />
    </>
  )
}