Last modified: Feb 11, 2025

Button

🚧 This documentation is a work in progress.

Usage

  • There should only be one primary button per page. Secondary options can be added as secondary buttons, which look like links.
  • The text on the button should be clear.
  • On the final step of the form (submission), the primary button should be green.

Anatomy

This example is taken from Altinn Studio Komponenter. Note that the example is not identical to the actual code but has been adapted to create prototypes in Figma.

Properties

The following is an autogenerated list of the properties available for Button based on the component’s JSON schema file (linked below).

We are currently updating how we implement components, and the list of properties may not be entirely accurate.

Failed to retrieve JSON schema for ‘Button’. Make sure the component schemaname is spelled correctly.

Configuration

We are currently updating Altinn Studio Designer with more configuration options! The documentation is continuously updated, and there may be more settings available than what is described here, and some settings may be in beta version.

Add component

    You can add a component in Altinn Studio Designer by dragging it from the list of components to the page area. Selecting the component brings up its configuration panel.

    Basic component:

    App/ui/layouts/{page}.json
    {
      "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
      {
        "data": {
          "layout": [
            {
              // Basic component (required properties)
            }
          ]
        }
      }
    }