New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@leafygreen-ui/typography

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@leafygreen-ui/typography

leafyGreen UI Kit Typography

20.1.1
latest
Source
npm

Version published: 3 days ago

Weekly downloads: 401K; increased by43.71%

Maintainers: 6

Weekly downloads

Created: 5 years ago

Source

Typography

npm (scoped)

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/typography

NPM

npm install @leafygreen-ui/typography

Peer Dependencies

Package	Version
`@leafygreen-ui/leafygreen-provider`	`^1.1.0`

Example

import { H1, H2, Subtitle, Body, InlineCode, InlineKeyCode, Disclaimer, Overline, Link, BackLink } from '@leafygreen-ui/typography';
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<Subtitle>Subtitle</Subtitle>
<Body weight="medium">Body</Body>
<InlineCode>Code</InlineCode>
<>
  <InlineKeyCode>CTRL</InlineKeyCode>
  <InlineCode>+</InlineCode>
  <InlineKeyCode>C</InlineKeyCode>
</>
<Disclaimer>Disclaimer</Disclaimer>
<Overline>Overline</Overline>
<Link href="http://mongodb.design">MongoDB.design</Link>
<BackLink href="/home">MongoDB.design</BackLink>

Output HTML

<h1 class="leafygreen-ui-wbskfk">Heading 1</h1>
<h2 class="leafygreen-ui-1t0mh6j">Heading 2</h2>
<h3 class="leafygreen-ui-1t0mh6j">Heading 3</h3>
<h6 class="leafygreen-ui-1dmxpt6">Subtitle</h6>
<div class="leafygreen-ui-wkgw79">Body</div>
<code class="leafygreen-ui-18bk0d8">Code</code>
<code class="leafygreen-ui-1vl51l4">CTRL</code
><code class="leafygreen-ui-1vl51l4">+</code
><code class="leafygreen-ui-1vl51l4">C</code>
<small class="leafygreen-ui-1cggyhz">Disclaimer</small>
<div class="leafygreen-ui-vezyzr">Overline</div>
<a
  href="http://mongodb.design"
  target="_blank"
  class="leafygreen-ui-1toaa4e"
  data-leafygreen-ui="anchor-container"
>
  <span>MongoDB.design</span>
  <svg
    width="16px"
    height="16px"
    viewBox="0 0 16 16"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <title>Open in New Tab</title>
  </svg>
</a>

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'`	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.

FAQs

What is @leafygreen-ui/typography?

Is @leafygreen-ui/typography popular?

Is @leafygreen-ui/typography well maintained?

Package last updated on 07 Feb 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@leafygreen-ui/typography

Typography

Installation

Yarn

NPM

Peer Dependencies

Example

Properties

H1

H2

H3

Subtitle

Body

InlineCode

InlineKeyCode

Disclaimer

Error

Overline

Link

BackLink

Label

Description

Related posts

Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional

Maven Central Adds Sigstore Signature Validation