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 (keyboard)
Supabase UI (underline)
Supabase UI (strikethrough)
Supabase UI (strong)
Supabase (Link)
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