Notice

Examples

import { Button } from '@orbex/sonar-components/button'
import { Notice } from '@orbex/sonar-components/notice'

export default function Tones() {
  return (
    <>
      <Notice title="Take a look:">
        New recycled-fiber boxes are in the market.
      </Notice>
      <Notice tone="success" title="Order created.">
        PO-2210 was sent for confirmation.
      </Notice>
      <Notice tone="warning" title="Carrier changed." action={<Button size="small" variant="text">Review</Button>}>
        Delivery 04-121A now arrives with Atlas Logistics.
      </Notice>
      <Notice tone="danger" title="2 invoices overdue.">
        Pay them before May 20 to keep your credit line.
      </Notice>
    </>
  )
}

Sizes, variants and states

Usage

• For a state that lasts: overdue invoices, a changed carrier, a tip. For feedback on an action that just happened, use a toast.
• A few bold words that name the situation, then one or two sentences. At most one action, as a text button.
• Info and success are calm; warning asks to check something; danger means something is wrong and has a way out.

Do and don’t

Accessibility

Notes

• The icon is decorative; the bold title says what kind of notice it is.
• A notice that appears while someone works takes role="status", or role="alert" when it is urgent, so it is announced.
• Text is at the default level on every tint, so it passes AA in both themes.

Use it

Each component is its own entry point with its own stylesheet, so an app loads only what it uses. The tokens and the cascade layers are set once for the app: see Installation.

import { Notice } from '@orbex/sonar-components/notice'
import '@orbex/sonar-components/notice.css'

API