Renders an inline badge UI component — this could be any small text that you want highlighted, such as an item count or state indicator.

opts[:to] — if there’s a to parameter, you’ll get an anchor element, otherwise a button element. opts[:variant] — specifies which visual variant of button you want, from those available in the CSS classes e.g. ui, danger opts[:e2e_classname] — A classname that will be applied to the element for testing purposes, only on integration env

See bitstyles badge docs for examples, and for the default variants available.

Default badge

iex> safe_to_string ui_badge("published")
~s(<span class="a-badge u-h6 u-font--medium a-badge--gray">published</span>)

Default badge with options

iex> safe_to_string ui_badge("published", class: "foo bar")
~s(<span class="a-badge u-h6 u-font--medium a-badge--gray foo bar">published</span>)

Brand 1 badge

iex> safe_to_string ui_badge("published", variant: "brand-1")
~s(<span class="a-badge u-h6 u-font--medium a-badge--brand-1">published</span>)

Brand 2 badge

iex> safe_to_string ui_badge("published", variant: "brand-2")
~s(<span class="a-badge u-h6 u-font--medium a-badge--brand-2">published</span>)

Dangerous badge

iex> safe_to_string ui_badge("edited", variant: "danger")
~s(<span class="a-badge u-h6 u-font--medium a-badge--danger">edited</span>)

Default badge as a block

iex> safe_to_string(ui_badge do
...>   "published"
...> end)
~s(<span class="a-badge u-h6 u-font--medium a-badge--gray">published</span>)

Badge as a block

iex> safe_to_string(ui_badge(variant: "danger") do
...>   "published"
...> end)
~s(<span class="a-badge u-h6 u-font--medium a-badge--danger">published</span>)