Github

Button

Buttons trigger user actions such as submit, save, cancel, or navigate.

Component variations

Variants

Contains: Solid, Subtle, Outline, Transparent. Solid is default

Size

Contains: Small as sm, medium as md, large as lg. Medium is default

Color Variations

Contains: Primary, Neutral, Error. Primary is default

Icons

Is a string value representing the icon name to be displayed on the left or right

Roundness

Is a boolean value. True makes the button rounded. Otherwise the default roundness will be applied.

Disabled

Is a boolean value. True disables the button. Otherwise the button will be enabled.

Loading

Is a boolean value. True makes the button in the loading state with loading indicator.

Usage Guidelines

Import

Import the button component in your module or component:

import-button.ts

Copy code

Basic Implementation

Here is a basic example of using the button component:

button-example.html

Copy code

All Available APIs

Here is an example of using the button component with all available APIs:

button-example.html

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
label
string
-
Yes
Text displayed on the button
variant
'solid' | 'outline' | 'subtle' | 'transparent'
'solid'
No
Visual style of the button
color
'primary' | 'neutral' | 'error'
'primary'
No
Color token for the button
size
'sm' | 'md' | 'lg'
'md'
No
Size of the button
rounded
boolean
false
No
Whether the button has fully rounded corners
disabled
boolean
false
No
Whether the button is disabled
loading
boolean
false
No
Whether the button is in loading state
leftIcon
string
-
No
Icon name to display on the left
rightIcon
string
-
No
Icon name to display on the right

Best Practices

When to Use

  • Use Button when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Button when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use clear, action-oriented labels that describe what happens when clicked
  • Choose solid variant for primary actions; outline for secondary actions
  • Use size consistently within a page to maintain visual hierarchy
  • Prefer neutral color for general actions; use semantic colors for destructive or important actions
  • Include icons to provide additional context but keep the label clear
  • Use loading state to provide feedback during async operations
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the button features in this section

example.html

Copy code