@leafygreen-ui/typography

leafyGreen UI Kit Typography

Usage no npm install needed!

<script type="module">
  import leafygreenUiTypography from 'https://cdn.skypack.dev/@leafygreen-ui/typography';
</script>

README

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, Disclaimer, Overline } 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>

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
Label label
Description p

Body

Prop Type Description Default
weight 'regular', 'medium' font-weight applied to typography element 'regular'

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

Overline

Prop Type Description Default
as React.ElementType The component or HTML tag to be rendered by the <Box /> component. Note: This will supersede the behavior of any other props. p

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

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

Description

Prop Type Description Default
darkMode boolean Determines if the component renders in dark mode false

Note: If the current host name is different from the host of the destination URL, we will provide the "_blank" value for the target prop. When the target is set to open in a new tab, we render an icon as a visual affordance.