Typography

Copy
import { Typography } from "tabler-react-2";

Typography is provided by the Typography component and includes provisions for headings, body text, special text, and more.

Tip: You can destructure the Typography component to bring individual components into scope. For example:

Copy
import { Typography } from "tabler-react-2";
const { H1, Text } = Typography;

export default () => (
  <>
    <H1>Heading 1</H1>
    <Text>Body text</Text>
  </>
);

Headings

Headings are provided by the H1, H2, H3, H4, H5, and H6 components. These map to their semantic HTML counterparts and include styles for the appropriate font size and weight as well as legibility enhancements.

Copy
<Typography.H1>Heading 1</Typography.H1>
<Typography.H2>Heading 2</Typography.H2>
<Typography.H3>Heading 3</Typography.H3>
<Typography.H4>Heading 4</Typography.H4>
<Typography.H5>Heading 5</Typography.H5>
<Typography.H6>Heading 6</Typography.H6>

Body text

Body text is provided by the Text component. It is enhanced by the Strong (or B), I, and U components for basic styling.

Copy
<Typography.Text>
  The <Typography.Strong>quick</Typography.Strong> brown{" "}
  <Typography.B>fox</Typography.B> jumps
  <Typography.I>over</Typography.I> the <Typography.U>lazy</Typography.U> dog.
</Typography.Text>

Strong and B are aliases for the same component. They both compile down to <strong>. They do not have any differences other than the aliasing.

Removing bottom margin

All body text elements have a bottom margin. You can override this by passing the mb-0 class:

Copy
<Typography.Text mb-0>
  The quick brown fox jumps over the lazy dog.
</Typography.Text>

This class works on all elements in Tabler, but is most commonly used on Typography.Text. See the margins documentation page for more information.

Inline links

You can use either a button or an inline link to direct a user to a destination.

Copy
import { Typography } from "tabler-react-2";

<Typography.Link href="https://google.com">Google</Typography.Link>;

It will default to an a tag, but you can make it use a Link component from the react-router-dom library by setting fallbackAnchor to false in your TablerProvider component.

Copy
<TablerProvider fallbackAnchor={false}>...</TablerProvider>

Special text

Special text is provided by the Typography.Special.* components.

Copy
<Typography.Special.Abbr>Abbreviation</Typography.Special.Abbr>
<Typography.Special.Cite>Citation</Typography.Special.Cite>
<Typography.Special.Del>Deleted</Typography.Special.Del>
<Typography.Special.Em>Emphasis</Typography.Special.Em>
<Typography.Special.Ins>Inserted</Typography.Special.Ins>
<Typography.Special.S>Strikethrough</Typography.Special.S>
<Typography.Special.Samp>Sample</Typography.Special.Samp>
<Typography.Special.Var>Variable</Typography.Special.Var>
<Typography.Special.Time>18:00</Typography.Special.Time>
<Typography.Special.Sub>Subscript</Typography.Special.Sub>
<Typography.Special.Sup>Superscript</Typography.Special.Sup>
<Typography.Special.Kbd>Keyboard</Typography.Special.Kbd>
<Typography.Special.Mark>Highlight</Typography.Special.Mark>
<Typography.Special.Code>Code</Typography.Special.Code>