# `PhiaUi.Components.Tag`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/display/tag.ex#L1)

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

| Variant     | Visual                                      |
|-------------|---------------------------------------------|
| `:default`  | Muted background, subtle border             |
| `:primary`  | Primary color background                    |
| `:success`  | Green/success background                    |
| `:warning`  | Yellow/warning background                   |
| `:error`    | Red/destructive background                  |
| `:outline`  | Border 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>

# `tag`

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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*