@leafygreen-ui/typography v19.1.0
Typography
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. |
13 days ago
24 days ago
1 month ago
1 month ago
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
6 months ago
7 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
7 months ago
8 months ago
8 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago