BitstylesPhoenix.Badge (bitstyles_phoenix v0.3.0) View Source
The Badge component.
Link to this section Summary
Functions
Renders an inline badge UI component — this could be any small text that you want highlighted, such as an item count or state indicator.
Link to this section Functions
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>)