Dropdowm

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 {
2  Button,
3  Divider,
4  Dropdown,
5  IconClipboard,
6  IconCopy,
7  IconTrash,
8  Menu,
9} from "@supabase/ui";
10
11export default function DropdownBasic() {
12  return (
13    <Dropdown
14      overlay={[
15        <Menu>
16          <Menu.Item icon={<IconClipboard />}>Copy</Menu.Item>
17          <Menu.Item icon={<IconCopy />}>Duplicate</Menu.Item>
18          <Divider light />
19          <Menu.Item icon={<IconTrash stroke="red" />}>Delete</Menu.Item>
20        </Menu>,
21      ]}
22    >
23      <Button type="outline">Click me</Button>
24    </Dropdown>
25  );
26}
27

Button types

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

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

1import {
2  Button,
3  Divider,
4  Dropdown,
5  IconClipboard,
6  IconCopy,
7  IconTrash,
8  Menu,
9} from "@supabase/ui";
10
11export default function DropdownBasic() {
12  const Overlay = () => (
13    <Menu>
14      <Menu.Item icon={<IconClipboard />}>Copy</Menu.Item>
15      <Menu.Item icon={<IconCopy />}>Duplicate</Menu.Item>
16      <Divider light />
17      <Menu.Item icon={<IconTrash stroke="red" />}>Delete</Menu.Item>
18    </Menu>
19  );
20
21  return (
22    <>
23      <Dropdown placement="bottomCenter" overlay={<Overlay />}>
24        <Button type="outline">Bottom center</Button>
25      </Dropdown>
26      <Dropdown placement="bottomLeft" overlay={<Overlay />}>
27        <Button type="outline">Bottom left</Button>
28      </Dropdown>
29      <Dropdown placement="bottomRight" overlay={<Overlay />}>
30        <Button type="outline">Bottom right</Button>
31      </Dropdown>
32      <Dropdown placement="topCentre" overlay={<Overlay />}>
33        <Button type="outline">Top center</Button>
34      </Dropdown>
35      <Dropdown placement="topLeft" overlay={<Overlay />}>
36        <Button type="outline">Top left</Button>
37      </Dropdown>
38      <Dropdown placement="topRight" overlay={<Overlay />}>
39        <Button type="outline">Top right</Button>
40      </Dropdown>
41    </>
42  );
43}
44

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

Syntax	Description
Header	Title
Paragraph	Text