Typography

Use the Typography component for all of your styled text needs

Basic Usage


import { Typography } from '@krakentech/coral/atoms';
 
<Typography>The five boxing wizards jump quickly</Typography>

The five boxing wizards jump quickly

Properties

color


<Typography color="success500">The five boxing wizards jump quickly</Typography>

The five boxing wizards jump quickly

component

It may be you want the style of a Heading 1, but the semantics of a Heading 2. In this case, you can use the component prop to change the underlying HTML element.


<Typography textStyle="h1" component="h2">
    The five boxing wizards jump quickly
</Typography>

The five boxing wizards jump quickly

textAlign


<Typography textAlign="center">The five boxing wizards jump quickly</Typography>

The five boxing wizards jump quickly

textTransform


<Typography textTransform="uppercase">Wizard</Typography>

Wizard

textWrap


<Typography textWrap="balance">
    Aliquip incididunt sunt dolore laborum aliquip cupidatat sint mollit commodo
    dolor. Aute cillum excepteur eu excepteur. Cupidatat cupidatat nostrud nisi
    dolore non. Aliqua amet nostrud aute aute exercitation voluptate eiusmod. Ea
    veniam elit quis eiusmod magna sunt irure velit consectetur veniam do sunt.
    Adipisicing deserunt commodo id et ullamco consequat.
</Typography>

Aliquip incididunt sunt dolore laborum aliquip cupidatat sint mollit commodo dolor. Aute cillum excepteur eu excepteur. Cupidatat cupidatat nostrud nisi dolore non. Aliqua amet nostrud aute aute exercitation voluptate eiusmod. Ea veniam elit quis eiusmod magna sunt irure velit consectetur veniam do sunt. Adipisicing deserunt commodo id et ullamco consequat.

hyphens


<Typography hyphens="auto">
    Aliquip incididunt sunt dolore laborum aliquip cupidatat sint mollit commodo
    dolor. Aute cillum excepteur eu excepteur. Cupidatat cupidatat nostrud nisi
    dolore non. Aliqua amet nostrud aute aute exercitation voluptate eiusmod. Ea
    veniam elit quis eiusmod magna sunt irure velit consectetur veniam do sunt.
    Adipisicing deserunt commodo id et ullamco consequat.
</Typography>

textStyle


<Typography textStyle="h3">The five boxing wizards jump quickly</Typography>

The five boxing wizards jump quickly

Variants


<Typography textStyle="hero1">The five boxing wizards jump quickly</Typography>
<Typography textStyle="hero2">The five boxing wizards jump quickly</Typography>
<Typography textStyle="h1">The five boxing wizards jump quickly</Typography>
<Typography textStyle="h2">The five boxing wizards jump quickly</Typography>
<Typography textStyle="h3">The five boxing wizards jump quickly</Typography>
<Typography textStyle="h4">The five boxing wizards jump quickly</Typography>
<Typography textStyle="h5">The five boxing wizards jump quickly</Typography>
<Typography textStyle="h6">The five boxing wizards jump quickly</Typography>
<Typography textStyle="button">The five boxing wizards jump quickly</Typography>
<Typography textStyle="body1">The five boxing wizards jump quickly</Typography>
<Typography textStyle="body2">The five boxing wizards jump quickly</Typography>
<Typography textStyle="caption">The five boxing wizards jump quickly</Typography>
<Typography textStyle="code">const x = 1;</Typography>
<Typography textStyle="kbd">Ctrl + C</Typography>

The five boxing wizards jump quickly

const x = 1;

Ctrl + C

Variants HTML mapping

`textStyle` variant	Underlying HTML element
`body1`	`<p>`
`body2`	`<p>`
`button`	`<span>`
`caption`	`<p>`
`h1`	`<h1>`
`h2`	`<h2>`
`h3`	`<h3>`
`h4`	`<h4>`
`h5`	`<h5>`
`h6`	`<h6>`
`homepageTitle`	`<h1>`
`hero1`	`<h1>`
`hero2`	`<h1>`
`code`	`<code>`
`kbd`	`<kbd>`

Responsiveness

color, textAlign and textStyle are all responsive variant props, which can be used as shown below.

Note that if textStyle is responsive, you will need to provide the component prop, for example:

<Typography textStyle={{ base: "body1", md: "body2" }} component="p">

The component prop becomes required here.


<Typography
    color={{ base: "primary500", lg: "secondary500" }}
    textAlign={{ base: "center", lg: "left" }}
    textStyle={{ base: "body2", lg: "body1" }}
    component="p"
>
    color
</Typography>

Responsive Element

Responsive sizes

Some textStyle variant already include responsive behaviour, so you might not need to use a responsive variant.

Variant	Base font size	Base font weight	`md`+ font size	`md`+ font weight
`hero1`	40px	700	144px	700
`hero2`	40px	700	50px	700
`homepageTitle`	40px	700	50px	700
`h1`	32px	500	40px	500
`h2`	24px	500	36px	500
`h3`	24px	500	28px	500
`h4`	20px	500	22px	500
`h5`	18px	500	—	—
`h6`	16px	500	—	—
`body1`	18px	400	—	—
`body2`	16px	400	—	—
`caption`	12px	400	—	—
`button`	18px	500	—	—
`code`	0.9em	400	—	—
`kbd`	0.9em	400	—	—

Full API

Name	Type	Default
`textStyle`	`"hero1" \| "hero2" \| "homepageTitle" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "body1" \| "body2" \| "caption" \| "button" \| "link" \| "code" \| "kbd" \| ResponsiveTypographyTextStyle` The typography variant to apply. The typography variant to apply as a responsive object. When using a responsive object, `component` is required because the element cannot be inferred from multiple breakpoint values.	`body1`
`component`	`ElementType` Overrides the element rendered. Combine this with the `textStyle` prop to control font sizing without sacrificing semantics. Required when `textStyle` is a responsive object, since the rendered element cannot be inferred from multiple breakpoint values.
`children`	`ReactNode` The content to render inside the Typography component.
`color`	`ResponsiveVariant<"inherit" \| "base20" \| "base100" \| "base200" \| "base300" \| "base500" \| "base900" \| "primary10" \| "primary100" \| "primary500" \| "primary600" \| "primary900" \| "secondary10" \| ... 57 more ... \| "contentsInformation500">` The color of the text.	`contentsBase900`
`direction`	ConditionalValue<WithEscapeHatch<OnlyKnown<"direction", `var(--${string})` \| Direction \| readonly NonNullable<Direction \| undefined>[] \| undefined>>> \| undefined The CSS `direction` property to apply.
`id`	`string` A unique identifier for this element.
`overflow`	ConditionalValue<WithEscapeHatch<OnlyKnown<"overflow", `var(--${string})` \| Overflow \| readonly string[] \| undefined>>> \| undefined The CSS `overflow` property to apply.
`textAlign`	`ResponsiveVariant<ConditionalValue<AnyString \| TextAlign \| readonly NonNullable<TextAlign \| undefined>[] \| undefined>>` The CSS `text-align` property to apply.
`textOverflow`	`ConditionalValue<AnyString \| readonly string[] \| TextOverflow \| undefined>` The CSS `text-decoration` property to apply.
`textWrap`	ConditionalValue<`var(--${string})` \| AnyString \| readonly string[] \| TextWrap \| undefined> The CSS `text-wrap` property to apply.
`whiteSpace`	`ConditionalValue<AnyString \| readonly string[] \| WhiteSpace \| undefined>` The CSS `white-space` property to apply.
`wordBreak`	ConditionalValue<WithEscapeHatch<OnlyKnown<"wordBreak", `var(--${string})` \| WordBreak \| readonly NonNullable<WordBreak \| undefined>[] \| undefined>>> \| undefined The CSS `word-break` property to apply.
`textTransform`	`ConditionalValue<AnyString \| readonly string[] \| TextTransform \| undefined>` The CSS `word-spacing` property to apply. ⚠︎ Use with caution. This property should be used for isolated words only.
`htmlFor`	`string` htmlFor attribute for when component is set to label.
`hyphens`	`ConditionalValue<AnyString \| Hyphens \| readonly NonNullable<Hyphens \| undefined>[] \| undefined>` The CSS `hyphens` property to apply.
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`