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.dark (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.

primary : String -> Badge

A primary-color variation of the badge.

Badge.primary "NEW"

success : String -> Badge

A variation of the badge with success-tone.

Badge.success "SENT"

warning : String -> Badge

A variation of the badge with warning-tone.

Badge.warning "0"

danger : String -> Badge

A variation of the badge with danger-tone.

Badge.danger "ERROR"

light : String -> Badge

A light grayish variation of the badge.

Badge.light "EMPTY"

dark : String -> Badge

A dark grayish variation of the badge.

Badge.dark "EMPTY"

Custom brightness

withBrightness : Brightness -> Badge -> Badge

With Badge.withBrightness, you'll be able to apply a different brightness for any badge. See Palette.brightness* for acceptable values.

Badge.success "SENT"
    |> Badge.withBrightness Palette.brightnessLight
    |> 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/1.0.0

UI.Badge

Building

Custom brightness

Rendering

Modules