GWAN Design System

GWAN.DEV

Home Documentation Themes Blog

Foundations

Icons

Actions

Buttons

Form Controls

Input

Text Area

Select Dropdown

Filter Dropdown

Checkbox

Radio Button

Switch

File Uploader

Color Picker

Multi Select

Search Input

Slider

OTP Input

Date Picker

Time Picker

Date Range Picker

Data Display

Table

Pagination

Progress Bar

Stat Card

Circular Progress

Navigation

Side Menu

Menu Bar

Tabs

Breadcrumb

Ellipsis

Content & Layout

Card

Divider

Banner

Carousel

Accordion

Timeline

Stepper

List

Overlays

Modal

Drawer

Popover

Command Palette

Dropdown Menu

Context Menu

Indicators

Tags

Chips

Badge

Avatar

Avatar Group

Tooltip

Skeleton

Spinner

Feedback

Snackbar

Alert

Callout

State

Buttons

Playground

Actions

Interact with the preview to see callbacks fire.

NameDescriptionDefaultControl

Content

labelstring

Text inside the button. Leave empty for an icon-only button.

Default—

leftIconReactNode

Icon shown before the label.

Default—

rightIconReactNode

Icon shown after the label.

Default—

Appearance

variantBUTTON_VARIANTS

Visual emphasis. Use one primary button per view.

DefaultBUTTON_VARIANTS.PRIMARY

sizeBUTTON_SIZE

Height, padding and text size. MD matches form element height.

DefaultBUTTON_SIZE.MD

edgesBUTTON_EDGE_STYLE

Corner style.

DefaultBUTTON_EDGE_STYLE.ROUNDED

Behaviour

disabledboolean

Blocks clicks and dims the button.

Defaultfalse

type"button" | "submit"

Native button type. Use submit inside a form.

Default"button"

buttonsubmit

Events

onClick*() => void

Called when the button is clicked.

Default—

Logged in Actions

Advanced

classNamestring

Extra classes on the button element.

Default""

Usage

import { Button } from "gwan-design-system";

<Button label="Label" onClick={() => {}} />