Typography

Use the Typography component for all of your styled text needs

Basic Usage


import { Typography } from '@krakentech/coral';
 
<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>

The five boxing wizards jump quickly

Responsiveness


<Typography
    color={{ base: "primary500", lg: "secondary500" }}
    textAlign={{ base: 'center', lg: 'left' }}
>
    color
</Typography>

Responsive Element

Full API

Name	Type	Default
`color`	`ResponsiveVariant<"inherit" \| "base20" \| "base100" \| "base200" \| "base300" \| "base500" \| "base900" \| "primary10" \| "primary100" \| "primary500" \| "primary600" \| "primary900" \| "secondary10" \| ... 57 more ... \| "contentsInformation500">` The color of the text.	`contentsBase900`
`component`	`ElementType` Overrides the element rendered. Combine this with the `variant` prop to control font sizing without sacrificing semantics.
`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`	`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 \| TextWrap \| readonly NonNullable<TextWrap \| undefined>[] \| undefined> The CSS `text-wrap` property to apply.
`textStyle`	`CoralTypographyVariant` The typography variant to apply.	`body1`
`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 \| TextTransform \| readonly NonNullable<TextTransform \| undefined>[] \| 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.
`children`	`ReactNode`
`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' };`