Designsystemet.Tag

A label for a category or status.

Mirrors Tag from @digdir/designsystemet-react.

Tag.view [ Ds.color Color.success ] [ Html.text "Godkjent" ]

A tag is not interactive. For something the user can click to filter or remove, use a Chip.

React → Elm

view : List (Attribute msg) -> List (Html msg) -> Html msg

A <span class="ds-tag">.

(List (Attribute msg) -> List (Html msg) -> Html msg)

-> List (Attribute msg)

-> List (Html msg)

-> Html msg

Tag styling on another element (React's asChild).

Tag.viewAs Html.a [ Attr.href "/saker?status=apen" ] [ Html.text "Åpen" ]

outline : Attribute msg

Border and no fill, for tags that should draw less attention.