PhiaUi.Components.BadgeDelta (phia_ui v0.1.17)

Copy Markdown View Source

Delta badge — a colored pill showing a metric trend with an icon.

Inspired by Tremor BadgeDelta, Ant Design Tag with trend, MUI trend chips. Common in dashboards to highlight KPI changes at a glance.

Examples

<.badge_delta value="+12.3%" delta_type={:increase} />
<.badge_delta value="-5%" delta_type={:decrease} size={:lg} />
<.badge_delta value="0%" delta_type={:unchanged} />

Summary

Functions

badge_delta(assigns)

Functions

badge_delta(assigns)

Attributes

  • value (:string) (required) - Display string, e.g. "+12.3%" or "-5%".
  • delta_type (:atom) - Controls icon and color scheme. Defaults to :unchanged. Must be one of :increase, :moderate_increase, :decrease, :moderate_decrease, or :unchanged.
  • size (:atom) - Badge size. Defaults to :default. Must be one of :xs, :sm, :default, or :lg.
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the root <span>.