UI.Badge

Badges are small elements displayed, usually on the right of texts or top-right corner of the view, serving as counters, tags, or labels.

Six color schemes are available: Primary, Warning, Danger, Success, Light, and Dark. But, brightness can also variate using the palette's brightness values with Badge.withBrightness.

A badge can be created and rendered as in the following pipeline:

Element.row []
    [ -- Some cool content
    , Badge.grayDark (String.fromInt (List.length someList))
        |> Badge.renderElement renderConfig
        |> Element.el [ Element.alignTop ]
    ]

Building

type Badge

The Badge type is used for describing the component for later rendering.

Light

grayLight : String -> Badge

A light grayish variation of the badge.

Badge.grayLight "EMPTY"

primaryLight : String -> Badge

A light primary-color variation of the badge.

Badge.primaryLight "NEW"

successLight : String -> Badge

A light variation of the badge with success-tone.

Badge.successLight "SENT"

warningLight : String -> Badge

A light variation of the badge with warning-tone.

Badge.warningLight "0"

dangerLight : String -> Badge

A light variation of the badge with danger-tone.

Badge.dangerLight "ERROR"

Dark

grayDark : String -> Badge

A dark grayish variation of the badge.

Badge.grayDark "EMPTY"

primaryDark : String -> Badge

A primary-color variation of the badge.

Badge.primaryDark "NEW"

successDark : String -> Badge

A variation of the badge with success-tone.

Badge.successDark "SENT"

warningDark : String -> Badge

A variation of the badge with warning-tone.

Badge.warningDark "0"

dangerDark : String -> Badge

A variation of the badge with danger-tone.

Badge.dangerDark "ERROR"

Options

withTone : (String -> Badge) -> Badge -> Badge

Replaces the tone of a badge with a new one.

Badge.successLight "status"
    |> (if model.requestStatus == Model.Failed then
            Badge.withTone Badge.dangerLight


        else
            identity
       )
    |> Badge.renderElement renderConfig

Rendering

renderElement : RenderConfig -> Badge -> Element msg

End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.

PaackEng/paack-ui/2.0.0