DevactionUI.Tag (devaction_ui v0.2.3)

Copy Markdown View Source

The small mono label of the canvas: EM RISCO, AGUARDANDO, EM DIA, APRENDIZADO, PLANEJADO.

Geist Mono, uppercase, 0.06em tracking, 6px radius, 1px border. The five variants take their border, background and text from the --tag-* tokens, so they flip with the theme. The variant says what the tag means, not what color it is: :risk, :warn, :ok, :info, :neutral; :indigo and :emerald are the tints of people and review.

size is :xs (10px, 3px 7px, a count beside a name), :sm (11px, 2px 7px, the count of an accordion or a stat), :md (11px, 3px 8px, the tag of a table or a list, the default) and :lg (12px, 4px 9px).

surface: :plain puts it on a white background, for tags that sit inside a tinted card (a finding, a callout), where a tinted tag would vanish. :soft is the borderless chip on the grey of the page (a PR number on a kanban card), keeping the text color of its variant; :flat is the same without border but in the tint of its variant.

case: :normal keeps the text as written, for a value that is code (:risk, phx-click) and would be wrong in capitals.

Summary

Functions

tag(assigns)

A small mono label whose variant says what it means.

Functions

tag(assigns)

@spec tag(map()) :: Phoenix.LiveView.Rendered.t()

A small mono label whose variant says what it means.

Attributes

  • variant (:atom) - what the tag means, which sets its border, background and text. Defaults to :neutral. Must be one of :risk, :warn, :ok, :info, :neutral, :indigo, or :emerald.
  • size (:atom) - :lg 12px, :md 11px for tables and lists, :sm 11px tighter for a count, :xs 10px for a count beside a name. Defaults to :md. Must be one of :lg, :md, :sm, or :xs.
  • surface (:atom) - :plain for a tag inside a tinted card, :soft a borderless chip on grey, :flat a borderless tint. Defaults to :tinted. Must be one of :tinted, :plain, :soft, or :flat.
  • case (:atom) - :normal for a value that is code and must keep its letters. Defaults to :upper. Must be one of :upper, or :normal.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)