Home Components Button
Button
Overview Playground API
An interactive button with a range of presentation options.
Usage
Button

  Button
Kind
Default long button
Simple text button
Block

  
Default long button
Simple text button
Block
Variants Here are several predefined button styles, each serving its own semantic purpose.
Default Light Outline Ghost


  Default

  Light

  Outline

  Ghost

Colors Here are several predefined button styles, each serving its own semantic purpose.
Primary Secondary Success Warning Danger
Dark Light Dark Inverse Light Inverse

  
Primary Secondary Success Warning Danger
Dark Light Dark Inverse Light Inverse

Custom branding Custom branding is possible by overriding the CSS variables. The following example shows how to change the color of the button to the primary brand color. Button text color will be adjusted to white or black based on it brightness of branding.
Default Light Outline Ghost
Default Light Outline Ghost


  
Default Light Outline Ghost
Default Light Outline Ghost
Sizes Fancy larger or smaller buttons? Add size attribute for additional sizes.
Small Medium Large XL Button XXL Button

  Small
  Medium
  Large
  XL Button
  XXL Button
Icon
Add Previous Next

Add Previous Next
States Selected Make buttons look active by adding the selected boolean attribute to any <button> element.
Primary

  Primary

Loading Show loader animation, by setting show-loader attribute.
Loading
Loading

  
Loading
Loading

Disabled Make buttons look inactive by adding the disabled boolean attribute to any <button> element.
Primary Outline Ghost

  Primary
  Outline
  Ghost
Events
Click me Disabled Button

  Click me
  Disabled Button

  <script>
    document.querySelector('#click-me-btn').addEventListener('goat:click', (event) => {
      myConsole.log('Button clicked', 'goat:click');
    });
    document.querySelector('#disabled-btn').addEventListener('goat:click', (event) => {
      myConsole.log('Button clicked', 'goat:click'); // this will not be fired
    });
  </script>
Usage Kind Variants Colors Sizes Icon States Events
Work in progress
Properties
Events
 Previous Next