Last modified: May 28, 2024

Alert

The component can be used to display a message with different levels of severity.

🚧 This documentation is a work in progress.

Usage

Alerts are commonly used to display important information to users that should be highlighted.

Anatomy

Alert anatomy

  1. Heading: A brief and descriptive title.
  2. Icon: A graphical symbol that conveys the severity of the alert.
  3. Text content: The written information or message associated with the alert.

Properties

PropertyTypeDescription
severitystringString 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.

    Altert settings panel
    Alert settings panel

    • 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.

      Alert info innstillinger
      Alert text settings
      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

        Info card

        Alert info innstillinger
        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

          Success card

          Alert success innstillinger
          Alert 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

            Warning card

            Alert warning innstillinger
            Alert 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

              Danger card

              Alert danger innstillinger
              Alert 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"
                    }
                    }
                  ]
                }
              }