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"
  rightIcon={<ArrowRightIcon size={16} strokeWidth={1.5} />}
/>

Inside a section title

Pass a composed Tagline node when SectionTitle needs a specific variant or icon treatment.

Capabilities

Senior-led support for urgent decisions

Alix teams combine operational depth with financial and legal context.

<SectionTitle
  align="start"
  size="md"
  tagline={
    <Tagline
      variant="outline"
      text="Capabilities"
      rightIcon={<ArrowRightIcon size={16} strokeWidth={1.5} />}
    />
  }
  title="Senior-led support for urgent decisions"
  description="Alix teams combine operational depth with financial and legal context."
  primaryAction={<Button>Explore services</Button>}
/>

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.
Composed SectionTitle taglines when the default text chip needs an icon or outline 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.