xAIcreator | AI content marketing agent for X

DesignButton

Pill-shaped button with 4 variants, 6 sizes, loading states, and icon support.

Component

Import

tsx

import { DesignButton } from "@/components/ui/design-button";
import { DesignIcon } from "@/components/ui/design-icon";

Variants

primary, secondary, tertiary, ghost

Text Sizes

small (28px), default (32px), large (40px)

Icon Sizes

iconSmall, icon, iconLarge

Features

loading, tooltip, iconColor

Props

Prop	Type	Default	Description
`variant`	"primary" \| "secondary" \| "tertiary" \| "ghost"	`"primary"`	Visual style of the button
`size`	"small" \| "default" \| "large" \| "iconSmall" \| "icon" \| "iconLarge"	`"default"`	Button size - use icon* sizes for icon-only buttons
`leftIcon`	ReactNode	`-`	Icon displayed before text
`rightIcon`	ReactNode	`-`	Icon displayed after text
`icon`	ReactNode	`-`	Icon for icon-only buttons (use with icon* sizes)
`loading`	boolean	`false`	Shows spinner and disables button
`loadingText`	ReactNode	`-`	Text shown during loading state
`disabled`	boolean	`false`	Disables the button (44% opacity)
`iconColor`	string	`-`	Custom color for tertiary variant (e.g., '#3b82f6')
`tooltip`	string	`-`	Tooltip text shown on hover
`tooltipSide`	"top" \| "bottom" \| "left" \| "right"	`"bottom"`	Tooltip placement
`content`	ReactNode	`-`	Custom content (overrides children, leftIcon, rightIcon)
`prefix`	ReactNode	`-`	Content before main content (persists during loading)
`suffix`	ReactNode	`-`	Content after main content (persists during loading)
`asChild`	boolean	`false`	Render as child element (for Link wrapping)

Common Patterns

Primary Action Button

Main CTA button

<DesignButton variant="primary" leftIcon={<DesignIcon name="open" />}>
  Publish
</DesignButton>

Secondary Action Button

Secondary actions

<DesignButton variant="secondary" leftIcon={<DesignIcon name="save" />}>
  Save Draft
</DesignButton>

Icon Button with Tooltip

Toolbar icon button

<DesignButton
  variant="ghost"
  size="iconLarge"
  icon={<DesignIcon name="setting" />}
  tooltip="Settings"
  tooltipSide="top"
/>

Loading State

Button with loading indicator

<DesignButton variant="primary" loading loadingText="Publishing...">
  Publish
</DesignButton>

Custom Color Tertiary

Tertiary button with custom color

<DesignButton variant="tertiary" iconColor="#3b82f6" leftIcon={<DesignIcon name="ai" />}>
  AI Assist
</DesignButton>

When to Use

Primary action (Publish, Submit, Confirm)

Use variant="primary" - high visual emphasis

<DesignButton variant="primary" leftIcon={<DesignIcon name="open" />}>
  Publish
</DesignButton>

Secondary action (Save, Schedule, Cancel)

Use variant="secondary" - outline style

<DesignButton variant="secondary" leftIcon={<DesignIcon name="save" />}>
  Schedule
</DesignButton>

Tertiary/Helper action (Filters, Options)

Use variant="tertiary" - subtle background

<DesignButton variant="tertiary" leftIcon={<DesignIcon name="ai" />}>
  Actions
</DesignButton>

Toolbar icons (no visible background)

Use variant="ghost" with icon* size

<DesignButton variant="ghost" size="iconLarge" icon={<DesignIcon name="preview" />} tooltip="Preview" />

Compact UI (tables, lists)

Use size="small" (28px height)

<DesignButton variant="secondary" size="small" leftIcon={<DesignIcon name="edit" />}>
  Edit
</DesignButton>

Use leftIcon prop for icon + text buttons

<DesignButton leftIcon={<DesignIcon name="open" />}>Publish</DesignButton>

Use icon prop with icon* sizes for icon-only buttons

<DesignButton size="iconLarge" icon={<DesignIcon name="setting" />} />

Add tooltip for icon-only buttons

<DesignButton size="icon" icon={<DesignIcon name="save" />} tooltip="Save draft" />

Use loading prop for async actions

<DesignButton loading loadingText="Saving...">Save</DesignButton>

Don't

Don't put icon as child for text buttons (use leftIcon)

// Bad
<DesignButton><DesignIcon name="open" />Publish</DesignButton>

// Good
<DesignButton leftIcon={<DesignIcon name="open" />}>Publish</DesignButton>

Don't use text sizes for icon-only buttons

// Bad - size="default" for icon-only
<DesignButton size="default"><DesignIcon name="open" /></DesignButton>

// Good - use icon sizes
<DesignButton size="icon" icon={<DesignIcon name="open" />} />

Don't use iconColor on non-tertiary variants

// iconColor only works with variant="tertiary"
<DesignButton variant="tertiary" iconColor="#3b82f6" />

Visual Examples

Interactive examples showing all variants and states

All Variants

Primary, Secondary, Tertiary, and Ghost

<DesignButton variant="primary" leftIcon={<DesignIcon name="open" />}>Publish</DesignButton>
<DesignButton variant="secondary" leftIcon={<DesignIcon name="save" />}>Schedule</DesignButton>
<DesignButton variant="tertiary" leftIcon={<DesignIcon name="ai" />}>Actions</DesignButton>
<DesignButton variant="ghost" leftIcon={<DesignIcon name="preview" />}>Preview</DesignButton>

All Sizes (Text)

small (28px), default (32px), large (40px)

<DesignButton size="small">Small</DesignButton>
<DesignButton>Default</DesignButton>
<DesignButton size="large">Large</DesignButton>

Icon-Only Buttons

iconSmall (28px), icon (32px), iconLarge (40px)

<DesignButton variant="tertiary" size="iconSmall" icon={<DesignIcon name="ai" />} />
<DesignButton variant="tertiary" size="icon" icon={<DesignIcon name="ai" />} />
<DesignButton variant="tertiary" size="iconLarge" icon={<DesignIcon name="ai" />} />

Ghost Toolbar Icons

Icon buttons with tooltips for toolbars

<DesignButton variant="ghost" size="iconLarge" icon={<DesignIcon name="save" />} tooltip="Save draft" tooltipSide="top" />
<DesignButton variant="ghost" size="iconLarge" icon={<DesignIcon name="preview" />} tooltip="Preview" tooltipSide="top" />
<DesignButton variant="ghost" size="iconLarge" icon={<DesignIcon name="setting" />} tooltip="Settings" tooltipSide="top" />

Disabled State

All variants with disabled prop

<DesignButton variant="primary" disabled>Disabled</DesignButton>
<DesignButton variant="secondary" disabled>Disabled</DesignButton>
<DesignButton variant="tertiary" disabled>Disabled</DesignButton>

Loading State

Automatic spinner with loading prop

<DesignButton variant="primary" loading>Publishing...</DesignButton>
<DesignButton variant="secondary" loading loadingText="Please wait...">Save</DesignButton>

Custom Icon Colors

Tertiary variant with iconColor prop

<DesignButton variant="tertiary" iconColor="#3b82f6" leftIcon={<DesignIcon name="ai" />}>Blue</DesignButton>
<DesignButton variant="tertiary" iconColor="#10b981" leftIcon={<DesignIcon name="ai" />}>Green</DesignButton>
<DesignButton variant="tertiary" iconColor="#f59e0b" leftIcon={<DesignIcon name="ai" />}>Orange</DesignButton>
<DesignButton variant="tertiary" iconColor="#ef4444" leftIcon={<DesignIcon name="ai" />}>Red</DesignButton>

With Both Icons

leftIcon and rightIcon combined

<DesignButton variant="primary" leftIcon={<DesignIcon name="plus" />} rightIcon={<DesignIcon name="chevron-right" />}>
  Create New
</DesignButton>