Theme Studio

Button

	Normal	Disabled	Loading
default
secondary
outline
ghost
destructive

Checkbox

Unchecked

Checked

Indeterminate

Disabled

Dialog

Input

Default

With placeholder

With value

Disabled

Read only

Error stateEnter a valid email address

Helper textAs it appears on your passport

Small

Large

With left icon

With right icon

Both icons

Filled variant

Filled with icon

Error with icon

This field is required

Select

Basic (md)

With label + helper (SelectField)

CountryWe'll ship to this address.

Error state

PlanPlease select a plan.

Tooltip

Default (top)

Placement variants

Icon button

Switch

UncheckedCheckedDisabled (off)Disabled (on)SmallLarge

Radio

Default (md)

FreeProEnterprise

Small

MonthlyYearly (save 20%)

Disabled group

BasicPremium

Slider

Default (md)

With value + format

$100

Small

Combobox

Basic (no label)

With label

Country

Select the country where you are located.

Disabled

Framework

Badge

Color variants

BrandGrayOutlineErrorSuccessWarningInfo

Sizes

SmallMedium

With dot indicator

OnlineOfflineAwayBusy

With leading icon

VerifiedCriticalInfoNew

Separator

Horizontal

Vertical

Item A

Item B

Item C

With label

OR

Popover

Default (bottom) with arrow

side="top"

With form fields

showArrow={false}

Controlled — open/close via external button

side="right"

Tabs

Default — pill style

Account settings

Manage your account name, email address, and connected services.

Underline style

Overview

A summary of your project's activity over the last 30 days.

With count badge

Inbox — 12 unread

Your incoming messages. Bold items are unread.

With disabled tab

General settings

Name, description, and visibility settings for your workspace.