Alert
The component can be used to display a message with different levels of severity.
On this page:
🚧 This documentation is a work in progress.
Usage
Alerts are commonly used to display important information to users that should be highlighted.
Anatomy
- Heading: A brief and descriptive title.
- Icon: A graphical symbol that conveys the severity of the alert.
- Text content: The written information or message associated with the alert.
Related
Properties
| Property | Type | Description |
|---|---|---|
severity | string | String value indicating the severity level of the alert. This affect the styling of the alert. Enum: "success" | "info" | "danger" | "warning" |
Configuration
Add component
You can add a component in Altinn Studio Designer by dragging it from the left-side panel to the middle page area. Selecting the component brings up its configuration panel on the right-hand side.
Settings in Altinn Studio Designer
We are currently updating Altinn Studio with more configuration options!
The documentation is continuously updated, but more settings may be available than described here, and some settings may be in beta.
Property settings available in Altinn Studio Designer.
- Komponent-ID (
id): Automatically generated component ID (editable). - Ledetekst (
textResourceBindings.title): Alert heading. - Tekstinnhold (
textResourceBindings.body): Alert content. - Alvorlighetsgrad (
severity): Severity level. Influences the alert’s styling (colors and icon).
Corresponding settings in the page’s JSON file.
App/ui/layouts/{page}.json{
"data": {
"layout": [
{
"id": "alert-id",
"type": "Alert",
"severity": "info",
"textResourceBindings": {
"title": "",
"body": ""
}
}
]
}
}
Heading and content
You can add heading and content by creating a new or pick an existing text resource.
App/ui/layouts/{page}.json{
"data": {
"layout": [
{
"id": "alert-id",
"type": "Alert",
"textResourceBindings": {
"title": "Vedrørende navneendring",
"body": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre navnet ditt."
},
"severity": "info"
}
}
]
}
}
Severity level
By changing the severity level, you can change the styling (colors and icon) of the alert.
info
App/ui/layouts/{page}.json{
"data": {
"layout": [
{
"id": "alert-id",
"type": "Alert",
"textResourceBindings": {
"title": "Vedrørende navneendring",
"body": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre navnet ditt."
},
"severity": "info"
}
}
]
}
}
success
App/ui/layouts/{page}.json{
"data": {
"layout": [
{
"id": "alert-id",
"type": "Alert",
"textResourceBindings": {
"title": "Vedrørende navneendring",
"body": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre navnet ditt."
},
"severity": "success"
}
}
]
}
}
warning
App/ui/layouts/{page}.json{
"data": {
"layout": [
{
"id": "alert-id",
"type": "Alert",
"textResourceBindings": {
"title": "Vedrørende navneendring",
"body": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre navnet ditt."
},
"severity": "warning"
}
}
]
}
}
danger
App/ui/layouts/{page}.json{
"data": {
"layout": [
{
"id": "alert-id",
"type": "Alert",
"textResourceBindings": {
"title": "Vedrørende navneendring",
"body": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre navnet ditt."
},
"severity": "danger"
}
}
]
}
}