Banner

For news that stays until it is dealt with: a billing problem, a degraded integration, a read-only mode. Toasts are for things that just happened; banners are for things that are still true.

import { Banner, Button, toast } from '@andrewbehma/glass-ui';

Playground

Banner.tsx

import { Banner, Button, toast } from '@andrewbehma/glass-ui';

<Banner
  tone="warn"
  title="Your trial ends in 3 days"
  action={<Button size="sm">Add payment method</Button>}
  onDismiss={() => toast('Dismissed')}
>
  Add a payment method to keep your workspace and its history.
</Banner>

States

Each tile is the live component. Open one in the playground to keep tweaking it.

Info
Ok
Warn
Danger