LineaUI.Components.Tag (linea_ui v0.1.1)

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.

Summary

Functions

tag(assigns)

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

tag_group(assigns)

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

Functions

tag(assigns)

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(assigns)

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>

class (:any) - Defaults to nil.
Global attributes are accepted.

inner_block (required)