Typography

Typography is a component for displaying text with various styles and formats. It includes subcomponents like Title, Paragraph, and Link.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <div>
      <Typography.Text>Default Text</Typography.Text>
      <br />
      <Typography.Text type="secondary">Secondary</Typography.Text>
      <br />
      <Typography.Text type="success">Success</Typography.Text>
      <br />
      <Typography.Text type="warning">Warning</Typography.Text>
      <br />
      <Typography.Text type="danger">Danger</Typography.Text>
      <br />
      <Typography.Text code>Code</Typography.Text>
      <br />
      <Typography.Text keyboard>Keyboard</Typography.Text>
      <br />
      <Typography.Text mark>Marked</Typography.Text>
      <br />
      <Typography.Text underline>Underline</Typography.Text>
      <br />
      <Typography.Text delete>Deleted</Typography.Text>
      <br />
      <Typography.Text strong>Strong</Typography.Text>
      <br />
      <Typography.Text italic>Italic</Typography.Text>
    </div>
  );
}

Result

Loading...

All Subcomponents

Live Editor

function AllSubcomponents() {
  return (
    <div>
      <Typography.Title level={2}>Typography Components</Typography.Title>
      <Typography.Paragraph>
        The Typography component includes several subcomponents for different text needs.
        Use <Typography.Text strong>Title</Typography.Text> for headings,
        <Typography.Text code>Text</Typography.Text> for inline text styling,
        and <Typography.Text mark>Paragraph</Typography.Text> for block content.
      </Typography.Paragraph>
      <Typography.Link href="https://superset.apache.org" target="_blank">
        Learn more about Apache Superset
      </Typography.Link>
    </div>
  );
}

Result

Loading...

Text Styling Options

Live Editor

function TextStyles() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <Typography.Text code>Code style</Typography.Text>
      <Typography.Text keyboard>Keyboard style</Typography.Text>
      <Typography.Text mark>Highlighted text</Typography.Text>
      <Typography.Text underline>Underlined text</Typography.Text>
      <Typography.Text delete>Deleted text</Typography.Text>
      <Typography.Text strong>Bold text</Typography.Text>
      <Typography.Text italic>Italic text</Typography.Text>
      <Typography.Text type="success">Success type</Typography.Text>
      <Typography.Text type="warning">Warning type</Typography.Text>
      <Typography.Text type="danger">Danger type</Typography.Text>
    </div>
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
children	string	"Sample Text"	The text content.
code	boolean	false	Code style.
copyable	boolean	false	Whether the text is copyable.
delete	boolean	false	Deleted line style.
disabled	boolean	false	Disabled content.
ellipsis	boolean	false	Display ellipsis when text overflows.
keyboard	boolean	false	Keyboard style.
mark	boolean	false	Marked/highlighted style.
italic	boolean	false	Italic style.
underline	boolean	false	Underlined style.
strong	boolean	false	Bold style.

Import

import { Typography } from '@superset/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.