BitstylesPhoenix.Component.Badge.ui_badge
You're seeing just the function
ui_badge
, go back to BitstylesPhoenix.Component.Badge module for more information.
Render a badge to highlighted small texts, such as an item count or state indicator.
Attributes
variant
— Variant of the badge you want, from those available in the CSS classes e.g.brand-1
,danger
class
- Extra classes to pass to the badge. SeeBitstylesPhoenix.Helper.classnames/1
for usage.- All other attributes are passed to the
span
tag.
See bitstyles badge docs for examples, and for the default variants available.
Default badge
iex> assigns = %{}
...> render ~H"""
...> <.ui_badge>
...> published
...> </.ui_badge>
...> """
"""
<span class="a-badge u-h6 u-font-medium a-badge--gray">
published
</span>
"""
Badge variant brand-1
iex> assigns = %{}
...> render ~H"""
...> <.ui_badge variant="brand-1">
...> new
...> </.ui_badge>
...> """
"""
<span class="a-badge u-h6 u-font-medium a-badge--brand-1">
new
</span>
"""
Badge variant brand-2
iex> assigns = %{}
...> render ~H"""
...> <.ui_badge variant="brand-2">
...> recommended
...> </.ui_badge>
...> """
"""
<span class="a-badge u-h6 u-font-medium a-badge--brand-2">
recommended
</span>
"""
Badge variant danger
iex> assigns = %{}
...> render ~H"""
...> <.ui_badge variant="danger">
...> deleted
...> </.ui_badge>
...> """
"""
<span class="a-badge u-h6 u-font-medium a-badge--danger">
deleted
</span>
"""
Extra options and classes
iex> assigns = %{}
...> render ~H"""
...> <.ui_badge class="extra-class" data-foo="bar">
...> published
...> </.ui_badge>
...> """
"""
<span class="a-badge u-h6 u-font-medium a-badge--gray extra-class" data-foo="bar">
published
</span>
"""