Table of Contents
Span
Use Span to style and format inline text elements.
Used for this
- To apply styles to short strings of text
- To include icons inline with text
Not for this
- To style an entire block of text, use Paragraph instead
How to use it
Bold
To apply bold styling without indicating semantic importance, use isBold.
Hue
The color of a span is specified with hue.
Icons
To include an icon at the beginning of a span, use <Span.StartIcon>.
To include an icon anywhere else in the span, use <Span.Icon>.
Monospace
Apply a fixed-width type treatment using isMonospace.
Configuration
- Name8.76.4•View source•View on npm
- Installnpm install @zendeskgarden/react-typography
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { MD, Paragraph, Span } from '@zendeskgarden/react-typography'
API
MD
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isBold | boolean | – | Applies bold font style |
isMonospace | boolean | – | Renders with monospace font |
tag | any | div | Updates the element's HTML tag |
Paragraph
Extends HTMLAttributes<HTMLParagraphElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
size | 'small' | 'medium' | 'large' | 'medium' | Controls the spacing between sibling paragraphs |
Span
Extends HTMLAttributes<HTMLSpanElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
hidden | boolean | – | Hides the span visually without hiding it from screen readers |
hue | string | – | Applies a font color. Use PALETTE colors when possible. Accepts all hex values. |
isBold | boolean | – | Applies bold font style. Font weight is inherited by default. |
isMonospace | boolean | – | Renders with monospace font |
tag | any | span | Updates the element's HTML tag |
Span.Icon
Extends HTMLAttributes<HTMLElement>
Span.StartIcon
Extends HTMLAttributes<HTMLElement>