Text

Badge, Icon, Tooltip, GlossaryTerm — small inline pieces for tags, icons, hover hints.

~ 2 min read

Component	Use for
`<Badge>`	Small status / version chip
`<Icon>`	Render an icon by name (Lucide + Mintlify aliases + brand glyphs)
`<Tooltip>`	Hover tooltip on inline text
`<GlossaryTerm>`	Glossary link with hover definition

Badge

Status / version / category chip.

Prop	Type	Default	Description
`variant`	`"default" \| "note" \| "tip" \| "success" \| "caution" \| "warning" \| "danger" \| "error" \| "accent"`	`"default"`	Color tone. `note`/`success`/`caution`/`danger`/`error` alias to the same five tones.
`size`	`"small" \| "medium" \| "large"`	`"medium"`	Padding/font size
`text`	`string`	—	Convenience for inline use without children

All variants

mdx

<Badge>default</Badge> <Badge variant="tip">tip</Badge> <Badge variant="warning">warning</Badge> <Badge variant="error">error</Badge> <Badge variant="accent">accent</Badge>

default tip warning error accent

All sizes

mdx

<Badge size="small">small</Badge> <Badge size="medium">medium</Badge> <Badge size="large">large</Badge>

small medium large

As a tag

mdx

Tangly v0.3 — <Badge variant="accent" size="small">new</Badge> AI agent skills.

Tangly v0.3 — new AI agent skills.

Icon

Renders an icon by name. Resolution order:

Inline brand glyph (GitHub, Twitter/X, LinkedIn, YouTube, Slack, Discord)
Lucide registry — direct match (Rocket, Code, …)
Font Awesome / Mintlify alias map (circle-check → CircleCheck, cog → Settings, search → Search, …)
PascalCase fallback (my-icon → MyIcon)
Fallback to CircleHelp (with a console warning)

Prop	Type	Default	Description
`icon`	`string`	—	Icon name (required)
`size`	`number \| string`	`16`	Pixel size
`color`	`string`	(currentColor)	Stroke color override
`class`	`string`	—	Additional CSS classes

Lucide name

mdx

<Icon icon="rocket" /> Launch ready

Launch ready

Font Awesome alias

mdx

<Icon icon="cog" /> Settings · <Icon icon="circle-check" /> Done

Settings · Done

Brand glyph

mdx

<Icon icon="github" size={20} /> GitHub · <Icon icon="x" size={20} /> X · <Icon icon="discord" size={20} /> Discord

GitHub · X · Discord

Larger, custom color

mdx

<Icon icon="zap" size={32} color="#EA580C" />

Hover-revealed tooltip on inline text.

Prop	Type	Default	Description
`tip`	`string`	—	Tooltip body (required)

mdx

The build runs through <Tooltip tip="Just-in-time esbuild + Vite, no bundling step">esbuild</Tooltip> for sub-second startup.

The build runs through esbuild for sub-second startup.

GlossaryTerm

Inline link to a glossary entry with a hover-revealed definition. Most authors don’t write <GlossaryTerm> by hand — Tangly’s rehype-glossary plugin auto-wraps the first occurrence of each glossary entry on every page. This component is the manual opt-in form.

Prop	Type	Default	Description
`slug`	`string`	—	Glossary entry slug — anchors to `/glossary#<slug>`
`term`	`string`	—	Term name (used as `data-term`)
`definition`	`string`	`""`	Definition body — appears in the hover tooltip
`href`	`string`	`/glossary#<slug>`	Override the link target

mdx

<GlossaryTerm
  slug="capacity-factor"
  term="Capacity factor"
  definition="The ratio of actual energy generated to the theoretical maximum if a plant ran at full power continuously."
>
  CF
</GlossaryTerm>

For the auto-linking behavior, see Glossary.

Source

Last updated 1 h ago Edit this page