ds-svelte-community
Nais Docs
Pages Typography Primitives Components

Version: 2.0.0-next.5

GlobalAlert

GlobalAlert is a component for displaying prominent alerts about your app, such as system status or important announcements. It spans the full width and centers content, typically placed at the top of a page.

Read more about this component in the Aksel documentation.

The system will be unavailable Sunday night

Announcements are used to communicate something about the app or system, or changes that affect users. For example, planned maintenance or operational messages.

Properties

GlobalAlert

PropertyDescriptionDefault
Control
Properties
"data-color"

Overrides the color derived from status. Used by InfoCard which doesn't have a status.

unknown 		-
as

Changes the HTML element used for the root element.

Testing: When using axe-core for accessibility testing, section might warn about unique landmarks if you have multiple Alerts on page with the same status. In those cases, consider using div as the root element, or adding unique aria-label or aria-labelledby props.

"section" "div" 		-
role

Role attribute for the inner content wrapper. GlobalAlert and LocalAlert use "alert", InfoCard uses undefined.

"alert" 		-
size

Changes the size of the alert.

"medium" "small" 		-
Snippets
children

Alert content.

 -

Properties included from: Omit<HTMLAttributes<HTMLElement>, "children">

GlobalAlertHeader

GlobalAlertHeader is the header section of a GlobalAlert, containing the icon, title, and optionally a close button.

PropertyDescriptionDefault
Control
Snippets
children

Header content (typically Title and optionally CloseButton).

 -

Properties included from: Omit<HTMLAttributes<HTMLDivElement>, "children">

GlobalAlertTitle

GlobalAlertTitle is the title component for GlobalAlert. Remember to use correct heading-level with the as prop.

PropertyDescriptionDefault
Control
Properties
as

Changes the HTML element used for the title.

"h2" "h3" "h4" "h5" "h6" "div" 		-
Snippets
children

Title content.

 -

Properties included from: Omit<HTMLAttributes<HTMLHeadingElement>, "children">

GlobalAlertContent

GlobalAlertContent is the content section of a GlobalAlert, containing the main message text.

PropertyDescriptionDefault
Control
Snippets
children

Content of the alert.

 -

Properties included from: Omit<HTMLAttributes<HTMLDivElement>, "children">

GlobalAlertCloseButton

GlobalAlertCloseButton is a close button for dismissing a GlobalAlert.

PropertyDescriptionDefault
Control
Events
onclick

Click handler for closing the alert.

 -

Properties included from: HTMLButtonAttributes