nili/ui
enfaartr
All components

Banner

Overview
10 exports6 variant axes17 props4 files
import { Banner, BannerAction } 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

The same five meanings as Alert. A banner is usually on screen at first paint, so it is announced politely by default.

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

export function Example() {
  return (
    <>
      <Banner status="error" title="Payment failed." />
      <Banner status="warning" title={t('content.maintenance')} />
      <Banner status="success" title={t('content.verified')} />
      <Banner status="info" title="We updated our terms." />
      <Banner status="feature" title={t('content.feature')} />
    </>
  )
}

Appearances

Four treatments, matching Alert.

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

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

Description, action and dismissal

description is appended after the title, separated by a dot. Banner takes a single inline action, per the design — if you need two, you want an Alert.

with description & action
Scheduled maintenance tonight.Between 02:00 and 03:00 UTC.
Details
custom icon
Smart filters are here.
Take a look
dismissible
Your account is verified.
import { Banner, Icon } from "@nili/ui"
import { RiSparkling2Line } from "@remixicon/react"

export function Example() {
  const [open, setOpen] = useState(true)
  if (!open) return null

  return (
    <Banner
      status="feature"
      appearance="light"
      title="Smart filters are here."
      description="Save a filter set and reuse it everywhere."
      icon={<Icon icon={RiSparkling2Line} />}
      action={{ label: "Take a look", href: "#" }}
      dismissible
      dismissLabel={t('close')}
      onDismiss={() => setOpen(false)}
    />
  )
}

Sticky

sticky pins the banner to the top of the viewport. Right for a page-level announcement; wrong for one inside a card.

You are viewing a read-only archive.
import { Banner } from "@nili/ui"

export function Example() {
  return (
    <Banner
      sticky
      status="info"
      title={t('sticky.archive')}
    />
  )
}