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, Gray & Outline. Brightness can also variate using the palette's brightness values with Badge.withBrightness. Optionally, an icon can be added to a badge if required.

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 ]
    ]

If you need a badge with an icon, this can be specified with just an additional step, as below:

Element.row []
    [ -- Some cool content
    , Badge.grayDark (String.fromInt (List.length someList))
        |> Badge.withIcon (Icon.packages "Packages")
        |> 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"

outlineLight : String -> Badge

A variation of the badge with a light gray outline, intended for usage with darker backgrounds.

Badge.outlineLight "SENT"

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"

outlineDark : String -> Badge

A variation of the badge with a dark gray outline, intended for usage with lighter backgrounds.

Badge.outlineDark "SENT"

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

withIcon : Icon -> Badge -> Badge

A variation of the badge with an icon.

Badge.primaryLight "NEW"
    |> Badge.withIcon (Icon.car "Car")

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/7.19.3