# `LineaUI.Components.Tag`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/tag.ex#L1)

LineOne's tags: clickable badges that represent an attribute, a filter or an action.

    <.tag href="#">Default</.tag>
    <.tag navigate={~p"/tags/elixir"} color="primary" shape="pill">Elixir</.tag>
    <.tag color="info" variant="bordered" shape="pill" phx-click="filter">Info</.tag>

A filter chip that can be selected takes `active`:

    <.tag :for={tag <- @tags} variant="soft" active={tag in @selected} phx-click="toggle" phx-value-tag={tag}>
      {tag}
    </.tag>

`tag_group/1` joins tags (and badges) side by side:

    <.tag_group>
      <.tag color="neutral">Primary</.tag>
      <.tag color="primary">55</.tag>
    </.tag_group>

With `href`, `navigate` or `patch` a tag is a link; otherwise it is a button.

# `tag`

Renders a tag: a link with `href`, `navigate` or `patch`, a button otherwise.

    <.tag patch={~p"/posts?tag=elixir"} color="primary" variant="bordered" shape="pill">Elixir</.tag>

## Attributes

* `color` (`:string`) - Defaults to `"neutral"`. Must be one of `"neutral"`, `"primary"`, `"secondary"`, `"info"`, `"success"`, `"warning"`, `"error"`, or `"light"`.
* `variant` (`:string`) - Defaults to `"solid"`. Must be one of `"solid"`, `"soft"`, `"bordered"`, or `"outline"`.
* `active` (`:boolean`) - The selected state of a filter chip: the tag takes the `primary` color of its `variant` (and `aria-pressed="true"`) whatever its `color`, so a list of chips only toggles this. Defaults to `false`.
* `shape` (`:string`) - Defaults to `"rounded"`. Must be one of `"rounded"`, `"pill"`, or `"square"`.
* `type` (`:string`) - Defaults to `"button"`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted. Supports all globals plus: `["href", "navigate", "patch", "method", "download", "name", "value", "disabled"]`.
## Slots

* `inner_block` (required)

# `tag_group`

Joins tags and badges side by side: the inner corners are squared and the borders overlap.

    <.tag_group>
      <.tag color="info" variant="soft">Message</.tag>
      <.tag color="info">65</.tag>
    </.tag_group>

## Attributes

* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

---

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