ds-svelte-community
Nais Docs
Pages Typography Primitives Components

Version: 2.0.0-next.5

LocalAlert

LocalAlert is a component for displaying important messages about a certain part of the page. It has a bordered appearance and is typically used inline within content.

Read more about this component in the Aksel documentation.

Could not save changes

LocalAlert is used to inform users about events affecting parts of the solution. It is placed near the event it relates to.

Properties

LocalAlert

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">

LocalAlertHeader

LocalAlertHeader is the header section of a LocalAlert, 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">

LocalAlertTitle

LocalAlertTitle is the title component for LocalAlert. 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">

LocalAlertContent

LocalAlertContent is the content section of a LocalAlert, containing the main message text.

PropertyDescriptionDefault
Control
Snippets
children

Content of the alert.

 -

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

LocalAlertCloseButton

LocalAlertCloseButton is a close button for dismissing a LocalAlert.

PropertyDescriptionDefault
Control
Events
onclick

Click handler for closing the alert.

 -

Properties included from: HTMLButtonAttributes