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 ]
]
The Badge
type is used for describing the component for later rendering.
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"
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"
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 : UI.Icon.Icon -> Badge -> Badge
A variation of the badge with an icon.
Badge.primaryLight "NEW"
|> Badge.withIcon (Icon.car "Car")
renderElement : UI.RenderConfig.RenderConfig -> Badge -> Element msg
End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.