Components

Tagline

Small labelled eyebrow chip with ghost, outline, and link variants and icon slots.

Install

npx shadcn@latest add @alix/tagline

Preview

GhostOutlineLink

Usage

<Tagline text="Ghost" />
<Tagline variant="outline" text="Outline" rightIcon={<ArrowRightIcon />} />
<Tagline variant="link" text="Link" leftIcon={<Circle size={6} fill="currentColor" />} />

Examples

Quiet service cue

A ghost tagline gives a section a small point of entry without competing with the heading.

Services

<Tagline text="Services" leftIcon={<Circle size={6} fill="currentColor" />} />

Linked insight cue

The link variant reads as a compact prompt when the title needs a related path nearby.

Latest insights

<Tagline
  variant="link"
  text="Latest insights"
  render={<a href="/insights" />}
  rightIcon={<ArrowRightIcon size={16} strokeWidth={1.5} />}
/>

Inside a section title

Pass tagline props when SectionTitle's eyebrow needs the outline or link treatment; for icons, compose Tagline directly above your own heading.

Capabilities

Senior-led support for urgent decisions

Alix teams combine operational depth with financial and legal context.

<SectionTitle
  align="start"
  headingSize="md"
  tagline={{ variant: "outline", text: "Capabilities" }}
  title="Senior-led support for urgent decisions"
  description="Alix teams combine operational depth with financial and legal context."
/>

When to use it

Use it for

Section kickers that orient a reader before a capability, insight, or people heading.
Small linked prompts beside editorial content where a full button would overstate the action.
SectionTitle eyebrows when the default text chip needs the outline or link treatment.

Reach for something else

Status, phase, or RAG labels: use Badge instead.
Standalone page headings or paragraph copy: use Text or SectionTitle instead.
Primary navigation or calls to action: use SectionLink or Button instead.

Props

Prop	Type	Default	Description
variant	"ghost" \| "outline" \| "link"	"ghost"	Chip style.
text	string	–	Label text.
leftIcon / rightIcon	ReactNode	–	Icon slots rendered before / after the label.
render	ReactElement	–	Render as another element; the chip styling rides onto it. The link variant looks interactive, so make it a real anchor with render={<a href="…" />}.