Button

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,

Loading

Button types

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

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

Loading

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

Loading

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.

Loading

With block

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

Loading

API Reference

PropertyType
ariaControlsstring
ariaSelectedboolean
blockboolean
childrenReact.ReactNode
classNameany
dangerboolean
disabledboolean
htmlTypeTBC
iconReact.ReactNode
iconRightReact.ReactNode
loadingboolean
loadingCenteredboolean
onClickReact.MouseEventHandler
refany
rolestring
shadowboolean
sizeTBC
styleCSSProperties
tabIndexTBC
typeTBC