Notice

Notice tells the person about a condition that is true now and that nobody just caused: a usage limit, a lost connection, a finished job. It takes space in the layout and never floats, so it cannot cover what it is about. It replaces Callout.

Usage

import { Button, Notice } from '@kushagradhawan/kookie-ui';
 
export function UsageNotice({ onDismiss }: { onDismiss: () => void }) {
  return (
    <Notice
      icon={<HugeiconsIcon icon={Alert02Icon} strokeWidth={1.75} />}
      action={<Button>Add credits</Button>}
      onDismiss={onDismiss}
    >
      You have used 90% of this month's credits.
    </Notice>
  );
}

Props

A notice with no action and no dismiss button is a sentence. Use Text unless it must stand apart from the page.

Confirmation

Confirmation is the same strip for a question that waits for an answer: a quiet no before a loud yes, and no dismiss button. It takes confirmLabel, cancelLabel (default 'Not now'), onConfirm, onCancel and busy.

Accessibility

• The strip is role="status" with aria-live="polite", so a notice that appears is announced without moving focus.
• Neither Notice nor Confirmation takes focus.