PhiaUi.Components.Tag (phia_ui v0.1.17)

Copy Markdown View Source

Removable tag component with dot indicator and close button.

Tags are compact labels with a rounded-md shape. They differ from chips (which are rounded-full and toggleable) by being simpler, non-toggleable labels that can optionally be dismissed.

Variants

VariantVisual
:defaultMuted background, subtle border
:primaryPrimary color background
:successGreen/success background
:warningYellow/warning background
:errorRed/destructive background
:outlineBorder only, transparent background

Examples

<.tag label="Elixir" />
<.tag label="Important" variant={:error} dot />
<.tag label="Feature" variant={:primary} dismissible on_dismiss="remove_tag" value="feature" />
<.tag label="Custom" variant={:success} size={:lg}>
  <:icon><svg>...</svg></:icon>
</.tag>

Summary

Functions

tag(assigns)

Renders an inline <span> styled as a removable tag.

Functions

tag(assigns)

Renders an inline <span> styled as a removable tag.

Tags support a dot indicator, an optional leading icon slot, and a dismissible close button that fires a Phoenix event.

Example

<.tag label="Elixir" variant={:primary} dot />
<.tag label="Draft" variant={:outline} dismissible on_dismiss="remove_tag" value="draft" />

Attributes

  • label (:string) (required) - Tag text content.
  • variant (:atom) - Visual style variant. Controls background, text colour, and border. Defaults to :default. Must be one of :default, :primary, :success, :warning, :error, or :outline.
  • size (:atom) - Size of the tag. Controls height, padding, and font size. Defaults to :default. Must be one of :sm, :default, or :lg.
  • dismissible (:boolean) - Show close button. Defaults to false.
  • on_dismiss (:string) - Phoenix event name for dismiss. Defaults to nil.
  • value (:string) - Value sent with dismiss event. Defaults to nil.
  • dot (:boolean) - Show colored dot indicator. Defaults to false.
  • class (:string) - Additional CSS classes merged via cn/1. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the root <span> element.

Slots

  • icon - Optional leading icon.