Home Components Button
Button
Overview API

Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.
Usage
Variants Here are several predefined button styles, each serving its own semantic purpose. Mix and match the `variant` and `sub-variant` to create a variety of buttons. `"simple"` is a simple button without default padding at end. `"block"` is a full-width button that spans the full width of its container.
Default Light Outline Ghost Neo-Brutalism

Light & Simple
Default & Block 


  <goat-button variant="default">Default</goat-button>

  <goat-button variant="light">Light</goat-button>

  <goat-button variant="outline">Outline</goat-button>

  <goat-button variant="ghost">Ghost</goat-button>

  <goat-button variant="neo">Neo-Brutalism
  </goat-button>

  <br>
  <br>

  <div class="component-container">
    <goat-button variant="light.simple">Light & Simple</goat-button>
  </div>

  <div class="component-container">
    <goat-button variant="block">Default & Block</goat-button>
  </div>
Colors Buttons come in different colors to indicate the action or the type of button. The following example shows the different colors available for the button component.
Primary Secondary Success Warning Danger
Switch your button color in dark theme using dark-mode-color attribute
White Black Inverse
Custom color
Default Light Outline Ghost Neo-Brutalism 

  <div class="component-container">
    <goat-button color="primary">Primary</goat-button>
    <goat-button color="secondary">Secondary</goat-button>
    <goat-button color="success">Success</goat-button>
    <goat-button color="warning">Warning</goat-button>
    <goat-button color="danger">Danger</goat-button>
  </div>

  <goat-text>Switch your button color in dark theme using <goat-code-highlighter inline="true">dark-mode-color</goat-code-highlighter> attribute</goat-text>
  <div class="component-container color-dark-theme-bg">
    <goat-button color="white">White</goat-button>
    <goat-button color="black">Black</goat-button>
    <goat-button color="black" dark-mode-color="white">Inverse</goat-button>
  </div>

  
  <style>
    :root {
      /* --color-custom is equivalent to --color-custom-60 */
      --color-custom: #8a3ffc;
      --color-custom-10: #f6f2ff;
      --color-custom-20: #e8daff;
      --color-custom-30: #d4bbff;
      --color-custom-40: #be95ff;
      --color-custom-50: #a56eff;
      --color-custom-60: #8a3ffc;
      --color-purple: #8a3ffc;
      --color-custom-70: #6929c4;
      --color-custom-80: #491d8b;
      --color-custom-90: #31135e;
      --color-custom-100: #1c0f30;
    }
  </style>

  <goat-text>Custom color</goat-text>
  <div class="component-container">
    <goat-button variant="default" color="custom" icon="arrow--right">Default</goat-button>
    <goat-button variant="light" color="custom" icon="arrow--right">Light</goat-button>
    <goat-button variant="outline" color="custom" icon="arrow--right">Outline</goat-button>
    <goat-button variant="ghost" color="custom" icon="arrow--right">Ghost</goat-button>
    <goat-button variant="neo" color="custom" icon="arrow--right">Neo-Brutalism</goat-button>
  </div>
Sizes Fancy larger or smaller buttons? Add size attribute for additional sizes.
Small Medium Large XL Button 2XL Button 

  <goat-button size="sm">Small</goat-button>
  <goat-button>Medium</goat-button>
  <goat-button size="lg">Large</goat-button>
  <goat-button size="xl">XL Button</goat-button>
  <goat-button size="2xl">2XL Button</goat-button>
Icon
Add Previous Next 

<div class="component-container">
  <goat-button icon="add--large"></goat-button>
  <goat-button icon="add--large">Add</goat-button>

  <goat-button icon="chevron--left" icon-align="start">Previous</goat-button>
  <goat-button icon="chevron--right">Next</goat-button>
</div>

<div class="component-container">
  <goat-button icon="save" variant="outline"></goat-button>
  <goat-button icon="save" variant="ghost"></goat-button>
</div>

<div class="component-container">
  <goat-button icon="save" size="sm"></goat-button>
  <goat-button icon="save" size="md"></goat-button>
  <goat-button icon="save" size="lg"></goat-button>
  <goat-button icon="save" size="xl"></goat-button>
  <goat-button icon="save" size="2xl"></goat-button>
</div>
States Selected Make buttons look active by adding the selected boolean attribute to any <button> element.
Primary 

  <goat-button selected="true">Primary</goat-button>

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

  <div class="component-container">
    <goat-button show-loader="true"></goat-button>
  </div>
  <div class="component-container">
    <goat-button show-loader="true">Loading</goat-button>
  </div>

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

  <goat-button disabled>Primary</goat-button>
  <goat-button variant="outline" disabled>Outline</goat-button>
  <goat-button variant="ghost" disabled>Ghost</goat-button>
Events
Click me Disabled Button 

  <goat-button id="click-me-btn">Click me</goat-button>
  <goat-button disabled id="disabled-btn">Disabled Button</goat-button>

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