Buttons

Buttons are interactive elements that trigger actions, submit forms, or navigate users through your application. They come in various styles, sizes, and states to meet different design needs.

Variants

Choose from five button variants to convey different levels of emphasis and purpose in your interface.

Button Variants

100%

Solid Button

Outline Button

Ghost Button

Soft Button

Link Button

<div class="flex flex-wrap gap-4">
    <byte-button variant="solid">Solid Button</byte-button>
    <byte-button variant="outline">Outline Button</byte-button>
    <byte-button variant="ghost">Ghost Button</byte-button>
    <byte-button variant="soft">Soft Button</byte-button>
    <byte-button variant="link">Link Button</byte-button>
  </div>

Colors

Buttons support a wide range of colors to match your brand and indicate different actions or states.

Button Colors

100%

Primary Action

Success

Danger

Warning

Info

Default

<div class="grid grid-cols-2 gap-4 md:grid-cols-3">
    <byte-button color="blue">Primary Action</byte-button>
    <byte-button color="green">Success</byte-button>
    <byte-button color="red">Danger</byte-button>
    <byte-button color="yellow">Warning</byte-button>
    <byte-button color="purple">Info</byte-button>
    <byte-button color="zinc">Default</byte-button>
  </div>

Sizes

Available in five sizes to fit different contexts and layout requirements.

Button Sizes

100%

Extra Small

Small

Medium

Large

Extra Large

<div class="flex items-center gap-4 flex-wrap">
    <byte-button size="xs">Extra Small</byte-button>
    <byte-button size="sm">Small</byte-button>
    <byte-button size="md">Medium</byte-button>
    <byte-button size="lg">Large</byte-button>
    <byte-button size="xl">Extra Large</byte-button>
  </div>

Icons

Add icons to buttons to enhance visual communication and provide additional context.

Buttons with Icons

100%

Add Item

Delete

Processing

Continue

<div class="flex flex-wrap gap-4">
    <byte-button icon="plus">Add Item</byte-button>
    <byte-button icon="trash" color="red">Delete</byte-button>
    <byte-button icon="arrow-path" loading>Processing</byte-button>
    <byte-button icon="arrow-right" variant="outline">Continue</byte-button>
  </div>

States

Buttons can reflect different states to communicate their current status or availability.

Button States

100%

Default

Disabled

Processing

<div class="flex flex-wrap gap-4">
    <byte-button>Default</byte-button>
    <byte-button disabled>Disabled</byte-button>
    <byte-button loading>Loading</byte-button>
    <byte-button loading icon="arrow-path">Processing</byte-button>
  </div>

Common Patterns

Primary & Secondary Actions

Action Patterns

100%

Save Changes

Cancel

<div class="flex gap-3">
    <byte-button color="blue">Save Changes</byte-button>
    <byte-button variant="outline">Cancel</byte-button>
  </div>

Dangerous Actions

100%

Delete Account

Cancel

<div class="flex gap-3">
    <byte-button color="red" icon="trash">Delete Account</byte-button>
    <byte-button variant="outline" color="red">Cancel</byte-button>
  </div>

API Reference

Properties

Property

Type

Default

Description

variant

string

'solid'

'solid', 'outline', 'ghost', 'soft', 'link'

color

string

'blue'

Any color from the theme palette

size

string

'md'

'xs', 'sm', 'md', 'lg', 'xl'

icon

string

Name of the icon to display

disabled

boolean

false

Disables the button

boolean

false

Shows loading state

Events

Event

Description

click

Fired when the button is clicked

Size Reference

Size

Example

Use Case

Button

Compact UIs, tight spaces

Button

Secondary actions

Button

Default size, most use cases

Button

Primary actions, CTAs

Button

Hero sections, prominent actions

Best Practices

Use clear, action-oriented text for button labels
Choose appropriate variants based on action importance
Maintain consistent sizing within the same context
Use loading states for asynchronous actions
Include icons only when they add value
Follow a clear visual hierarchy with button variants

Accessibility

Buttons are built with accessibility in mind:

Proper role="button" when needed
Keyboard navigation support
Loading state announcements
Disabled state handling
Focus management

Pro tip: Use the solid variant for primary actions and outline or ghost variants for secondary actions to create clear visual hierarchy.