DesignButton

Button component with pill shape, Inter font, and smooth transitions

Variant Types

Primary (Filled)
32px
variant="primary"
Secondary (Outline)
32px
variant="secondary"
Tertiary (Light)
32px
variant="tertiary"
Ghost (Transparent)
32px
variant="ghost"

Text Button Sizes

Small
28px
size="small"
Default
32px
(no size prop)
Large
40px
size="large"

Icon-Only Button Sizes

Icon Small
28px × 28px
size="iconSmall"
Icon Default
32px × 32px
size="icon"
Icon Large
40px × 40px
size="iconLarge"

Ghost Variant (Toolbar Icons)

Ghost Icons
40px × 40px
variant="ghost" size="iconLarge"

All Variants

Primary, Secondary, Tertiary, and Ghost

Props:
{ variant: "all" }

Small Size Variants

Compact 28px height buttons

Props:
{ size: "small" }

Loading State

Button with loading spinner

Props:
{ variant: "primary", disabled: true }

Text Only

Button without icon

Props:
{ variant: "secondary | tertiary" }

Icon Only (All Sizes)

Icon buttons in all three sizes

Props:
{ size: "iconSmall | icon | iconLarge" }

All Variants (Icon Large)

Primary, Secondary, Tertiary, Ghost icon buttons

Props:
{ variant: "all", size: "iconLarge" }

Custom Icon Colors (Tertiary)

Tertiary icon buttons with custom iconColor prop

Props:
{ variant: "tertiary", iconColor: "custom" }

Custom Colors with Text

Text and icon use the same custom color

Props:
{ variant: "tertiary", iconColor: "custom" }

Left Icon Prop

Use leftIcon prop for cleaner syntax

Props:
{ leftIcon: "<DesignIcon name="open" />" }

Right Icon Prop

Add icons after text with rightIcon

Props:
{ rightIcon: "<DesignIcon name="chevron-right" />" }

Both Icons

Combine leftIcon and rightIcon

Props:
{ leftIcon: "<DesignIcon name="plus" />", rightIcon: "<DesignIcon name="chevron-right" />" }

Loading State

Auto spinner with loading prop

Props:
{ loading: true }

Loading with Custom Text

Different text during loading

Props:
{ loading: true, loadingText: "Saving..." }

Loading with Left Icon

Loading replaces leftIcon automatically

Props:
{ leftIcon: "<DesignIcon name="open" />", loading: true }

Custom Content (Slot)

Fully custom content using content prop

Props:
{ content: "<custom JSX>" }

Prefix & Suffix Slots

Always visible content around main content

Props:
{ prefix: "<Badge />", suffix: "<Count />" }

Complex Custom Content

Avatar + text + badge layout

Props:
{ content: "complex JSX" }

Interactive Content

Badges, counters, and status indicators

Props:
{ content: "interactive JSX" }

Built-in Tooltip

Add tooltip with tooltip prop

Props:
{ tooltip: "string", tooltipSide: "top | bottom" }

Icon Prop

Use icon prop for icon-only buttons

Props:
{ icon: "<DesignIcon name="..." />" }