Typography

Basic button compoment

Installing

Install the component

npm install @supabase/ui

Getting started

Import the component

@import { Typography } from '@supabase/ui'

This component contains sub components which might be easier to use in variables. Alternative import method can be to do the following.

@import { Typography } from '@supabase/ui'

const { Title, Text, Link } from Typography

<Title level={3}>I am some text</Title>
<Text>I am some text</Text>
<Link>I am some link</Link>

Titles

You can define the type of a button using the type prop. There are primary, default, secondary, outline, dashed, and text,

Hello world

Hello world

Hello world

Hello world

Hello world
1import { Typography } from "@supabase/ui";
2
3export default function TypographyText() {
4  return (
5    <>
6      <Typography.Title level={1}>Hello world</Typography.Title>
7      <Typography.Title level={2}>Hello world</Typography.Title>
8      <Typography.Title level={3}>Hello world</Typography.Title>
9      <Typography.Title level={4}>Hello world</Typography.Title>
10      <Typography.Title level={5}>Hello world</Typography.Title>
11    </>
12  );
13}
14

Text

You can define the type of a button using the type prop. There are primary, default, secondary, outline, dashed, and text,

Supabase UI (default)
Supabase UI (secondary)
Supabase UI (success)
Supabase UI (warning)
Supabase UI (danger)
Supabase UI (disabled)
Supabase UI (mark)
Supabase UI (code)
Supabase UI (keyboard)
Supabase UI (underline)
Supabase UI (strikethrough)
Supabase UI (strong)
Supabase (Link)
1import { Typography } from "@supabase/ui";
2
3export default function TypographyText() {
4  return (
5    <>
6      <Typography.Text>Supabase UI (default)</Typography.Text>
7      <br />
8      <Typography.Text type="secondary">
9        Supabase UI (secondary)
10      </Typography.Text>
11      <br />
12      <Typography.Text type="success">Supabase UI (success)</Typography.Text>
13      <br />
14      <Typography.Text type="warning">Supabase UI (warning)</Typography.Text>
15      <br />
16      <Typography.Text type="danger">Supabase UI (danger)</Typography.Text>
17      <br />
18      <Typography.Text disabled>Supabase UI (disabled)</Typography.Text>
19      <br />
20      <Typography.Text mark>Supabase UI (mark)</Typography.Text>
21      <br />
22      <Typography.Text code>Supabase UI (code)</Typography.Text>
23      <br />
24      <Typography.Text keyboard>Supabase UI (keyboard)</Typography.Text>
25      <br />
26      <Typography.Text underline>Supabase UI (underline)</Typography.Text>
27      <br />
28      <Typography.Text strikethrough>
29        Supabase UI (strikethrough)
30      </Typography.Text>
31      <br />
32      <Typography.Text strong>Supabase UI (strong)</Typography.Text>
33      <br />
34      <Typography.Link href="https://supabase.io" target="_blank">
35        Supabase (Link)
36      </Typography.Link>
37    </>
38  );
39}
40