Patterns
Glossary term
An underlined host-defined term with a keyboard-accessible definition tooltip.
import { GlossaryTerm } from "@krizaka/ui/glossary-term";La marge brute aide à comparer les mois.
Web only — React, from @krizaka/ui/glossary-term. Beta: its API may still change in a minor version.
- Mobile · n/a. The inline web tooltip has no native twin yet; a native screen can present the same definition in text. → Description list
Why it is here. Akinaza's inline explanations of accounting and booking terms, without sending a shop owner away.
When to use
- A reader may need a short explanation of a domain word without leaving the sentence.
- A data figure uses a term that is defined in the host's catalogue.
When not to use
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { GlossaryTerm } from "@krizaka/ui/glossary-term";Examples
Inline definition
Explain one shop figure in a sentence without replacing the host's wording.
La marge brute aide à comparer les mois.
Props
An underlined glossary word with a keyboard- and screen-reader-accessible definition tooltip.
| Prop | Type | Default | Description |
|---|---|---|---|
definitionrequired | ReactNode | — | The host's definition. |
termrequired | string | — | The word in the host's glossary. |
Accessibility
- The term remains the trigger's accessible name and the definition is linked as its description.
- The tooltip opens on keyboard focus and pointer hover.
Keyboard
| Keys | Action |
|---|---|
| Tab | Focuses the term and opens its definition; Escape dismisses the tooltip. |
Best practices
- Keep the definition short enough to read in context.
- Use the same term and definition in the page glossary and the host's catalogue.
Related components
Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub