# @leafygreen-ui/typography > leafyGreen UI Kit Typography Latest version **22.2.4** (published 2026-01-21) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @leafygreen-ui/typography pnpm add @leafygreen-ui/typography yarn add @leafygreen-ui/typography bun add @leafygreen-ui/typography ``` ## Health **Score 65/100 (B)** — status: stable. Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 22.2.4 | | Published | 2026-01-21 | | First published | 2020-03-23 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 6 | | Unpacked size | 526.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 272 | | Maintainers | hswolff, thesonofthomp, brookescarlett, shaneeza, stephl3, _tsck | ## Links - npm: https://www.npmjs.com/package/@leafygreen-ui/typography - Repository: https://github.com/mongodb/leafygreen-ui - Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/typography - Issues: https://jira.mongodb.org/projects/PD/summary - npm.io page: https://npm.io/package/@leafygreen-ui/typography ## Dependencies (6) - [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.0 - [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.8.0 - [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.2 - [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.0 - [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.2 - [@leafygreen-ui/polymorphic](https://npm.io/package/@leafygreen-ui/polymorphic.md) ^3.1.0 ## Recent versions - 22.2.4 (latest) — 2026-01-21 - 22.1.4-wizard-beta.0 (wizard-beta) — 2025-10-10 - 22.2.3 — 2025-11-24 - 22.2.2 — 2025-11-13 - 22.2.1 — 2025-11-11 - 22.2.0 — 2025-10-31 - 22.1.4 — 2025-10-21 - 22.1.3 — 2025-09-25 - 22.1.2 — 2025-09-10 - 22.1.1 — 2025-09-03 - 22.1.0 — 2025-07-28 - 22.0.1 — 2025-07-03 - 22.0.0 — 2025-06-30 - 21.0.1 — 2025-06-16 - 21.0.0 — 2025-05-29 - … 113 more at https://npm.io/package/@leafygreen-ui/typography/versions ## README # Typography ![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/typography.svg) #### [View on MongoDB.design](https://www.mongodb.design/component/typography/live-example/) ## Installation ### PNPM ```shell pnpm add @leafygreen-ui/typography ``` ### Yarn ```shell yarn add @leafygreen-ui/typography ``` ### NPM ```shell npm install @leafygreen-ui/typography ``` ## Peer Dependencies | Package | Version | | ------------------------------------ | -------- | | `@leafygreen-ui/leafygreen-provider` | `^1.1.0` | ## Example ```js import { H1, H2, Subtitle, Body, InlineCode, InlineKeyCode, Disclaimer, Overline, Link, BackLink } from '@leafygreen-ui/typography';

Heading 1

Heading 2

Heading 3

Subtitle Body Code <> CTRL + C Disclaimer Overline MongoDB.design MongoDB.design ``` ## Properties All props extend the HTMLElementProps of their root tag, however the below components accept extra props | Component | Root | | --------------- | ------- | | `H1` | `h1` | | `H2` | `h2` | | `H3` | `h3` | | `Subtitle` | `h6` | | `Body` | `p` | | `InlineCode` | `code` | | `InlineKeyCode` | `code` | | `Disclaimer` | `small` | | `Overline` | `p` | | `Link` | `a` | | `BackLink` | `a` | | `Label` | `label` | | `Description` | `p` | | `Label` | `p` | # H1 | Prop | Type | Description | Default | | ---------- | ------------------- | -------------------------------------------------------------------------------------------------- | ------- | | `darkMode` | `boolean` | Determines if the component renders in dark mode | `false` | | `as` | `React.ElementType` | Element to render the component as. **Note**: This will supersede the behavior of any other props. | `'h1'` | # H2 | Prop | Type | Description | Default | | ---------- | ------------------- | -------------------------------------------------------------------------------------------------- | ------- | | `darkMode` | `boolean` | Determines if the component renders in dark mode | `false` | | `as` | `React.ElementType` | Element to render the component as. **Note**: This will supersede the behavior of any other props. | `'h2'` | # H3 | Prop | Type | Description | Default | | ---------- | ------------------- | -------------------------------------------------------------------------------------------------- | ------- | | `darkMode` | `boolean` | Determines if the component renders in dark mode | `false` | | `as` | `React.ElementType` | Element to render the component as. **Note**: This will supersede the behavior of any other props. | `'h3'` | # Subtitle | Prop | Type | Description | Default | | ---------- | ------------------- | -------------------------------------------------------------------------------------------------- | ------- | | `darkMode` | `boolean` | Determines if the component renders in dark mode | `false` | | `as` | `React.ElementType` | Element to render the component as. **Note**: This will supersede the behavior of any other props. | `'h6'` | # Body | Prop | Type | Description | Default | | -------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------- | --------------------------------------------- | | `weight` | `'regular'` \| `'medium'` \| `'semiBold'` | font-weight applied to typography element | `'regular'` | | `darkMode` | `boolean` | Determines if the component renders in dark mode | `false` | | `as` | `React.ElementType` | Element to render the component as. **Note**: This will supersede the behavior of any other props. | `'p'` | | `baseFontSize` | `13` \| `16` | font-size applied to typography element | Defaults to value set by LeafyGreen Provider. | # InlineCode | Prop | Type | Description | Default | | -------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | | `href` | `string \| undefined` | If an `href` prop is passed to `InlineCode` it will be rendered with an `a` tag wrapping the `code` tag. Otherwise, it'll simply render as a `code` tag. | | | `darkMode` | `boolean` | Determines if the component renders in dark mode | | | `baseFontSize` | `13` \| `16` | font-size applied to typography element | Defaults to value set by LeafyGreen Provider. | # InlineKeyCode | Prop | Type | Description | Default | | -------------- | ------------ | ------------------------------------------------ | --------------------------------------------- | | `darkMode` | `boolean` | Determines if the component renders in dark mode | | | `baseFontSize` | `13` \| `16` | font-size applied to typography element | Defaults to value set by LeafyGreen Provider. | # Disclaimer | Prop | Type | Description | Default | | ---------- | --------- | ------------------------------------------------ | ------- | | `darkMode` | `boolean` | Determines if the component renders in dark mode | `false` | # Error | Prop | Type | Description | Default | | ---------- | --------- | ------------------------------------------------ | ------- | | `darkMode` | `boolean` | Determines if the component renders in dark mode | `false` | # Overline | Prop | Type | Description | Default | | ---------- | ------------------- | ------------------------------------------------------------------------------------------------------------------- | ------- | | `as` | `React.ElementType` | The component or Element to render the component as. **Note**: This will supersede the behavior of any other props. | `p` | | `darkMode` | `boolean` | Determines if the component renders in dark mode | `false` | # Link | Prop | Type | Description | Default | | ------------------ | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | | `arrowAppearance` | `'hover'`, `'persist'`, `'none'` | Displays a right arrow adjacent to the anchor tag. When set to `persist` the arrow will always be present. When set to `hover`, the arrow will only appear when hovering over the arrow. | `'none'` | | `hideExternalIcon` | `boolean` | Hides the external icon when the current host name is different from the host of the destination URL | `false` | | `darkMode` | `boolean` | Determines if the component renders in dark mode | `false` | | `as` | `React.ElementType` | Element to render the component as. **Note**: This will supersede the behavior of any other props. | `'a'` | | `baseFontSize` | `13` \| `16` | font-size applied to typography element | Defaults to value set by LeafyGreen Provider. | # BackLink _Note_: `BackLink` is intended for internal linking only | Prop | Type | Description | Default | | -------------- | ------------------- | -------------------------------------------------------------------------------------------------- | --------------------------------------------- | | `darkMode` | `boolean` | Determines if the component renders in dark mode | `false` | | `as` | `React.ElementType` | Element to render the component as. **Note**: This will supersede the behavior of any other props. | `'a'` | | `baseFontSize` | `13` \| `16` | font-size applied to typography element | Defaults to value set by LeafyGreen Provider. | # Label | Prop | Type | Description | Default | | -------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | | `darkMode` | `boolean` | Determines if the component renders in dark mode | `false` | | `disabled` | `boolean` | Determines whether the component should appear disabled | `false` | | `baseFontSize` | `13` \| `16` | font-size applied to typography element | Defaults to value set by LeafyGreen Provider. | | `as` | `React.ElementType` | The component or Element to render the component as. **Note**: This will supersede the behavior of any other props. | `label` | # Description | Prop | Type | Description | Default | | -------------- | ------------ | ------------------------------------------------ | --------------------------------------------- | | `darkMode` | `boolean` | Determines if the component renders in dark mode | `false` | | `baseFontSize` | `13` \| `16` | font-size applied to typography element | Defaults to value set by LeafyGreen Provider. | --- _Source: https://npm.io/package/@leafygreen-ui/typography · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._