Button

Basic button compoment

Installing

Install the component

npm install @supabase/ui

Getting started

Import the component

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

Basic

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

1import { Button } from "@supabase/ui";
2
3export default function BasicButton() {
4  return <Button>Primary Button</Button>;
5}
6

Button types

You can define the type of a button using the type prop.

There are primary, default, secondary, outline, dashed, and text.

1import { Button } from "@supabase/ui";
2
3export default function ButtonTypes() {
4  return (
5    <>
6      <Button type="primary">Primary Button</Button>
7      <Button type="default">Primary Button</Button>
8      <Button type="dashed">Dashed Button</Button>
9      <Button type="outline">Outline Button</Button>
10      <Button type="text">Text Button</Button>
11      <Button type="link">Link Button</Button>
12    </>
13  );
14}
15

Size

You can define the size of a button using the size prop.

There are tiny, small, medium, large and xlarge. The default size is tiny

1import { Button } from "@supabase/ui";
2
3export default function ButtonSizes() {
4  return (
5    <>
6      <Button size="tiny">tiny</Button>
7      <Button size="small">small</Button>
8      <Button size="medium">medium</Button>
9      <Button size="large">large</Button>
10      <Button size="xlarge">xlarge</Button>
11    </>
12  );
13}
14

Using icons

Icons can be used with a Button using the icon prop. You can import any Icon component from Supabase UI.

If you use Icons from the Supabase UI library, the Icon will respect the size of the Button. For example: if the Button is shown in Xlarge, then the Icon will be shown in XLarge.

There is also support for icons on the right side of the button using buttonRight.

1import { Button, IconMail } from "@supabase/ui";
2
3export default function ButtonIcons() {
4  return (
5    <>
6      <Button icon={<IconMail />}>Icon on the left</Button>
7      <Button iconRight={<IconMail />}>Icon on the right</Button>
8    </>
9  );
10}
11

With block

Buttons can be expanded to take the entire width of the space using the prop block.

1import { Button } from "@supabase/ui";
2
3export default function ButtonBlock() {
4  return <Button block>Blocked based button</Button>;
5}
6

API reference

SyntaxDescription
HeaderTitle
ParagraphText