Badge

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,

bluegraygreenindigopinkpurpleredyellow
1import { Badge } from "@supabase/ui";
2
3export default function BadgeBasic() {
4  return (
5    <>
6      <Badge color="blue">blue</Badge>
7      <Badge color="gray">gray</Badge>
8      <Badge color="green">green</Badge>
9      <Badge color="indigo">indigo</Badge>
10      <Badge color="pink">pink</Badge>
11      <Badge color="purple">purple</Badge>
12      <Badge color="red">red</Badge>
13      <Badge color="yellow">yellow</Badge>
14    </>
15  );
16}
17

Dot

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

With dot
1import { Badge } from "@supabase/ui";
2
3export default function BadgeDot() {
4  return <Badge dot>With dot</Badge>;
5}
6

API reference

SyntaxDescription
HeaderTitle
ParagraphText