Definition

Definition marks a term with a stylized underline that reveals an explanatory tooltip on hover. Use it for glossary terms in prose, in lieu of an icon with a tooltip — which can become redundant when there are numerous definitions on a single page.

#Combinations

#Guidelines

#When to use

• When explaining a term where it appears — for example a table column header, a switch or field label, or a value whose full detail lives in the tooltip.
• When a page defines many terms and repeated info icons with tooltips would become redundant.

#When not to use

• If explaining a specific control rather than a term, use a tooltip instead.

#Props

Name	Default	Description
children	—	ReactNode The text content of the definition.
message	—	string The message to display when hovering over the definition.
placement	"top"	PlacementWithLogical The placement of the tooltip.
size	"md"	"sm" | "md" | "lg" Font size.
fontWeight	"normal"	"normal" | "medium" | "semibold" Font weight
letterSpacing	"normal"	"normal" | "wide" Letter spacing.