Skip to main content

​
Typography

The Typography component is used to present text content with consistent styling and hierarchy. It supports various semantic HTML elements and visual variants from the theme.

​
Import

import { Typography } from '@naturacosmeticos/natds-web';

​
Usage

​
Basic Typography

import { Typography } from '@naturacosmeticos/natds-web';

function Example() {
  return (
    <Typography variant="body1">
      This is a paragraph of text using the body1 variant.
    </Typography>
  );
}

​
Headings

import { Typography } from '@naturacosmeticos/natds-web';

function HeadingExamples() {
  return (
    <>
      <Typography variant="h1">Heading 1</Typography>
      <Typography variant="h2">Heading 2</Typography>
      <Typography variant="h3">Heading 3</Typography>
      <Typography variant="h4">Heading 4</Typography>
      <Typography variant="h5">Heading 5</Typography>
      <Typography variant="h6">Heading 6</Typography>
    </>
  );
}

​
Body Text

import { Typography } from '@naturacosmeticos/natds-web';

function BodyExamples() {
  return (
    <>
      <Typography variant="body1">
        This is body1 text - the default variant. It's used for most body content.
      </Typography>
      <Typography variant="body2">
        This is body2 text - slightly smaller than body1, useful for secondary content.
      </Typography>
    </>
  );
}

​
Subtitles and Captions

import { Typography } from '@naturacosmeticos/natds-web';

function SubtitleExamples() {
  return (
    <>
      <Typography variant="subtitle1">Subtitle 1</Typography>
      <Typography variant="subtitle2">Subtitle 2</Typography>
      <Typography variant="caption">Caption text</Typography>
      <Typography variant="overline">Overline text</Typography>
    </>
  );
}

​
Colors

Typography supports theme colors: 
import { Typography } from '@naturacosmeticos/natds-web';

function ColorExamples() {
  return (
    <>
      <Typography color="primary">Primary color text</Typography>
      <Typography color="secondary">Secondary color text</Typography>
      <Typography color="textPrimary">Primary text color</Typography>
      <Typography color="textSecondary">Secondary text color</Typography>
      <Typography color="error">Error color text</Typography>
      <Typography color="inherit">Inherit color from parent</Typography>
    </>
  );
}
Available colors: initial, inherit, primary, secondary, textPrimary, textSecondary, error

​
Alignment

Control text alignment: 
import { Typography } from '@naturacosmeticos/natds-web';

function AlignmentExamples() {
  return (
    <>
      <Typography align="left">Left aligned text</Typography>
      <Typography align="center">Center aligned text</Typography>
      <Typography align="right">Right aligned text</Typography>
      <Typography align="justify">Justified text that will align to both left and right edges.</Typography>
      <Typography align="inherit">Inherit alignment from parent</Typography>
    </>
  );
}
Available alignments: inherit, left, center, right, justify

​
Variants

All available typography variants: 
import { Typography } from '@naturacosmeticos/natds-web';

function AllVariants() {
  return (
    <>
      <Typography variant="h1">h1 - Largest heading</Typography>
      <Typography variant="h2">h2 - Second heading</Typography>
      <Typography variant="h3">h3 - Third heading</Typography>
      <Typography variant="h4">h4 - Fourth heading</Typography>
      <Typography variant="h5">h5 - Fifth heading</Typography>
      <Typography variant="h6">h6 - Smallest heading</Typography>
      <Typography variant="subtitle1">subtitle1 - Larger subtitle</Typography>
      <Typography variant="subtitle2">subtitle2 - Smaller subtitle</Typography>
      <Typography variant="body1">body1 - Default body text</Typography>
      <Typography variant="body2">body2 - Smaller body text</Typography>
      <Typography variant="button">button - Button text</Typography>
      <Typography variant="caption">caption - Caption text</Typography>
      <Typography variant="overline">overline - Overline text</Typography>
    </>
  );
}

​
Semantic HTML

By default, Typography maps variants to semantic HTML elements. You can override this: 
import { Typography } from '@naturacosmeticos/natds-web';

function SemanticExamples() {
  return (
    <>
      {/* h1 variant renders as <h1> by default */}
      <Typography variant="h1">Renders as h1 element</Typography>
      
      {/* Override to use different element */}
      <Typography variant="h1" component="h2">
        Looks like h1, but renders as h2
      </Typography>
      
      {/* Paragraph variant */}
      <Typography paragraph>
        This text will have paragraph spacing and renders as a p element.
      </Typography>
    </>
  );
}

​
Text Utilities

​
Gutter Bottom

Add bottom margin: 
import { Typography } from '@naturacosmeticos/natds-web';

function GutterExample() {
  return (
    <>
      <Typography variant="h3" gutterBottom>
        This heading has bottom margin
      </Typography>
      <Typography variant="body1">
        This text follows after the gutter space.
      </Typography>
    </>
  );
}

​
No Wrap

Prevent text wrapping with ellipsis: 
import { Typography } from '@naturacosmeticos/natds-web';

function NoWrapExample() {
  return (
    <div style={{ width: 200 }}>
      <Typography noWrap>
        This very long text will not wrap and will be truncated with ellipsis when it exceeds the container width.
      </Typography>
    </div>
  );
}

​
Display

Control display type: 
import { Typography } from '@naturacosmeticos/natds-web';

function DisplayExamples() {
  return (
    <>
      <Typography display="block">Block display</Typography>
      <Typography display="inline">Inline display</Typography>
      <Typography display="inline">Also inline</Typography>
    </>
  );
}

​
Props

​
ITypographyProps

​
variant
TypographyVariant
default:"body1"
The typography style variant. Options: h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, body1, body2, button, caption, overline, inherit, srOnly.
​
color
TypographyColor
default:"initial"
The color of the text. Options: initial, inherit, primary, secondary, textPrimary, textSecondary, error.
​
align
'inherit' | 'left' | 'center' | 'right' | 'justify'
default:"inherit"
Set the text alignment.
​
gutterBottom
boolean
default:"false"
If true, adds bottom margin to the text.
​
noWrap
boolean
default:"false"
If true, text will not wrap and will truncate with ellipsis.
​
paragraph
boolean
default:"false"
If true, the component will be a paragraph element and have bottom margin.
​
display
'initial' | 'inline' | 'block'
default:"initial"
Controls the display type of the component.
​
component
React.ElementType
The component used for the root node. Either a string (HTML element) or a component.
​
children
React.ReactNode
The content of the typography component.
​
className
string
CSS class name for custom styling.
​
classes
object
Override or extend the styles applied to the component.
​
variantMapping
object
Custom mapping of variants to HTML elements.

​
Common Patterns

​
Article Content

import { Typography } from '@naturacosmeticos/natds-web';

function Article() {
  return (
    <article>
      <Typography variant="h2" gutterBottom>
        Article Title
      </Typography>
      <Typography variant="subtitle1" color="textSecondary" gutterBottom>
        By Author Name · Published on Jan 1, 2024
      </Typography>
      <Typography variant="body1" paragraph>
        This is the first paragraph of the article with some introductory content.
      </Typography>
      <Typography variant="body1" paragraph>
        This is the second paragraph with more detailed information.
      </Typography>
    </article>
  );
}

​
Card with Typography

import { Card, Typography } from '@naturacosmeticos/natds-web';

function ProductCard() {
  return (
    <Card style={{ padding: 16 }}>
      <Typography variant="h5" gutterBottom>
        Product Name
      </Typography>
      <Typography variant="subtitle2" color="textSecondary" gutterBottom>
        Category
      </Typography>
      <Typography variant="body2" paragraph>
        Product description goes here.
      </Typography>
      <Typography variant="h4" color="primary">
        $99.99
      </Typography>
    </Card>
  );
}

​
Accessibility

The Typography component with srOnly variant creates screen-reader-only text: 
import { Typography, Icon } from '@naturacosmeticos/natds-web';

function AccessibleIcon() {
  return (
    <>
      <Icon name="outlined-action-filter" />
      <Typography variant="srOnly">
        Filter results
      </Typography>
    </>
  );
}

​
Advanced Usage

For more advanced use cases and additional props, refer to the Material-UI Typography documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us