All components (204)
Global alert
Surfaces · GlobalAlert · .amset-banner
What it is and when to use it
The full-width ribbon at the top of the page: a maintenance shutdown, a trial about to expire, an incident. It speaks about the whole application, not about what is being filled in.
When to use it
- Notices that apply to any screen: a scheduled shutdown, an outside service being down, the end of the trial period.
variant="solid"for an outage or a block that cannot go unnoticed;soft(default) for the rest.size:smfor a ribbon that accompanies without getting in the way (the test environment),lgfor an outage.actionfor a button or a link on the right ("Renew", "View details"). In windows narrower than 40rem it drops to its own line and the cross stays at the top, in its corner.fixedkeeps it attached to the top when scrolling (position: sticky), for maintenance or outages.centeredcenters the text when the ribbon is short and takes up the whole screen.onClosewhen it can be dismissed. The ribbon does not remove itself: whoever draws it removes it, on receiving the call.
When not to
- What concerns the form or the card being viewed:
Alert. - A network outage:
ConnectionStatus, which already listens to the browser. - Cookie consent:
CookieBanner.
Keyboard: the ribbon is not focusable. The close button (with onClose) and whatever goes in action have their own Tab stop; Enter and Space press the close button.
Accessibility: with tone="error" it is role="alert" and interrupts; the rest, role="status", wait their turn, because an informational ribbon has no reason to cut off what is being read. announcement forces it (alert, status or none). The icon is decorative (aria-hidden) and each tone has its own silhouette: a triangle for the warning, an octagon for the error; icon changes it and withoutIcon removes it. The cross is seen at 24 to 32 px and pressed at 44 × 44 with a finger; it is named "Close the notice" and closeLabel changes it.
Fine-tuning: CSS variables --amset-banner-*: -padding-block, -padding-line, -slot, -font, -icon and -close; the tone colors, in --amset-banner-tone, -tone-soft, -tone-solid and -tone-ink. fixed is sticky at the top, in the --amset-layer-sticky layer.
What it looks like
<GlobalAlert tone="warning">
El mantenimiento del sabado dejara la tienda sin pedidos de 02:00 a 04:00.
</GlobalAlert>Props
Import it with import { GlobalAlert } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
childrenrequired | ReactNode | — |
action | ReactNode | A button or a link on the right: "Renew", "View details". |
announcement | AlertAnnouncement | Forces how it is announced. By default an error interrupts and the rest wait their turn. |
centered | boolean | Centers the text when the ribbon is short and takes up the whole screen. |
className | string | Merged with the library classes; it does not replace them. |
closeLabel | string | — |
fixed | boolean | It stays stuck to the top when scrolling. For maintenance or outages. |
icon | ReactNode | Own icon instead of the one that applies by tone. |
onClose | () => void | — |
size | "sm" | "md" | "lg" | `sm` for a ribbon that accompanies (test environment); `lg` for an outage. |
tone | "neutral" | "accent" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | What it means. Defaults to `info`. |
variant | GlobalAlertVariant | — |
withoutIcon | boolean | No icon: for purely informational banners. |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
CSS variables
These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.
| Variable | Default |
|---|---|
--amset-banner-tone | var(--amset-info) |
--amset-banner-tone-soft | var(--amset-info-soft) |
--amset-banner-tone-solid | var(--amset-info-solid) |
--amset-banner-tone-ink | var(--amset-info-ink) |
--amset-banner-padding-block | var(--amset-space-3) |
--amset-banner-padding-line | var(--amset-space-4) |
--amset-banner-slot | var(--amset-space-3) |
--amset-banner-font | var(--amset-text-base) |
--amset-banner-icon | 1.125rem |
--amset-banner-close | 1.75rem |
--amset-banner-background | var(--amset-banner-tone-soft) |
--amset-banner-border | color-mix(in oklab, var(--amset-banner-tone) 30%, transparent) |
--amset-banner-text | var(--amset-banner-tone) |
How to change it
.amset-banner {
--amset-banner-tone: ...;
--amset-banner-tone-soft: ...;
}In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: