Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

TextHighlight

TextHighlight emphasizes short inline phrases inside prose.

CoreBasics@gaudi/design-system/core/TextHighlightView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { TextHighlight } from '@gaudi/design-system/core/TextHighlight';

Usage

import { TextHighlight } from '@gaudi/design-system';
<p>Design systems make <TextHighlight>consistency visible</TextHighlight>.</p>

Examples

Playground

Storybook

Tones

Storybook

API

5 props

Accessibility

TextHighlight is inline text emphasis. It must keep the original text readable and must not be the only way meaning is conveyed.

HighlightInline emphasis within article text.AspectRatioKeep media at a stable aspect ratio as its container resizes.1 exampleAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesButtonButton renders the Gaudi action and link-button variants.7 examplesButtonGroupGroup related actions with joined borders and consistent sizing.9 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examples