Tabs

Basic button compoment

Installing

Install the component

npm install @supabase/ui

Getting started

Import the component

@import { Tabs } 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,

Tab one content
1import { Tabs } from "@supabase/ui";
2
3export default function TabsBasic() {
4  return (
5    <Tabs>
6      <Tabs.Panel id="one" label="Tab one">
7        Tab one content
8      </Tabs.Panel>
9      <Tabs.Panel id="two" label="Tab two">
10        Tab two content
11      </Tabs.Panel>
12      <Tabs.Panel id="three" label="Tab three">
13        Tab three content
14      </Tabs.Panel>
15    </Tabs>
16  );
17}
18

Underline

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

Tab one content
1import { Tabs } from "@supabase/ui";
2
3export default function TabsBasic() {
4  return (
5    <Tabs type="underlined">
6      <Tabs.Panel id="one" label="Tab one">
7        Tab one content
8      </Tabs.Panel>
9      <Tabs.Panel id="two" label="Tab two">
10        Tab two content
11      </Tabs.Panel>
12      <Tabs.Panel id="three" label="Tab three">
13        Tab three content
14      </Tabs.Panel>
15    </Tabs>
16  );
17}
18

Icon

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

Tab one content
1import { IconAlertCircle, Tabs } from "@supabase/ui";
2
3export default function TabsBasic() {
4  return (
5    <Tabs type="underlined">
6      <Tabs.Panel id="one" icon={<IconAlertCircle />} label="Tab one">
7        Tab one content
8      </Tabs.Panel>
9      <Tabs.Panel id="two" icon={<IconAlertCircle />} label="Tab two">
10        Tab two content
11      </Tabs.Panel>
12      <Tabs.Panel id="three" icon={<IconAlertCircle />} label="Tab three">
13        Tab three content
14      </Tabs.Panel>
15    </Tabs>
16  );
17}
18

Block

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

Tab one content
1import { Tabs } from "@supabase/ui";
2
3export default function TabsSize() {
4  return (
5    <Tabs size="large" block>
6      <Tabs.Panel id="one" label="Tab one">
7        Tab one content
8      </Tabs.Panel>
9      <Tabs.Panel id="two" label="Tab two">
10        Tab two content
11      </Tabs.Panel>
12      <Tabs.Panel id="three" label="Tab three">
13        Tab three content
14      </Tabs.Panel>
15    </Tabs>
16  );
17}
18

Scrollable

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

Content for the panel 0
1import { Tabs, Typography } from "@supabase/ui";
2
3export default function TabsSize() {
4  const limit = 30;
5  let infitniteSroll = [];
6
7  for (var i = 0; i < limit; i++) {
8    infitniteSroll.push(
9      <Tabs.Panel id={`panel-${i}`} label={`Tab ${i}`}>
10        <Typography.Text>Content for the panel {i}</Typography.Text>
11      </Tabs.Panel>
12    );
13  }
14
15  return (
16    <Tabs type="underlined" scrollable>
17      {infitniteSroll}
18    </Tabs>
19  );
20}
21

Size

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

Tab one content
1import { Tabs } from "@supabase/ui";
2
3export default function TabsSize() {
4  return (
5    <Tabs size="large">
6      <Tabs.Panel id="one" label="Tab one">
7        Tab one content
8      </Tabs.Panel>
9      <Tabs.Panel id="two" label="Tab two">
10        Tab two content
11      </Tabs.Panel>
12      <Tabs.Panel id="three" label="Tab three">
13        Tab three content
14      </Tabs.Panel>
15    </Tabs>
16  );
17}
18

AddOnBefore

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

Tab one content
1import { Button, Tabs } from "@supabase/ui";
2
3export default function TabsSize() {
4  return (
5    <Tabs
6      type="underlined"
7      size="medium"
8      scrollable
9      addOnBefore={[<Button type="outline">Action button</Button>]}
10    >
11      <Tabs.Panel id="one" label="Tab one">
12        Tab one content
13      </Tabs.Panel>
14      <Tabs.Panel id="two" label="Tab two">
15        Tab two content
16      </Tabs.Panel>
17      <Tabs.Panel id="three" label="Tab three">
18        Tab three content
19      </Tabs.Panel>
20    </Tabs>
21  );
22}
23

API reference

SyntaxDescription
HeaderTitle
ParagraphText