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. See BitstylesPhoenix.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--text">
  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--text extra-class" data-foo="bar">
  published
</span>
"""