Tag
A small mono pill — a label in the monospace secondary font, optionally with a 12px leading icon. Styles: outline (bordered) and solid (filled). Colour: grey.
| Prop | Type | Default | Notes |
|---|---|---|---|
label |
String | nil |
Tag text. Also accepts a content block. |
style |
String | "outline" |
One of STYLES: outline (bordered) · solid (filled). |
colour |
String | "grey" |
One of COLOURS: grey. |
icon |
String | nil |
Optional leading icon name → IconComponent (12px). |
**html_options |
Hash | — | Any extra HTML attributes (id, class, data-*, …). |
Outline
DEBUT
1 | <%= render TagComponent.new(label: "DEBUT") %> |
Solid
DEBUT
1 | <%= render TagComponent.new(label: "DEBUT", style: "solid") %> |
With icon
DEBUT
1 | <%= render TagComponent.new(label: "DEBUT", icon: "circle") %> |