An interactive button with a range of presentation options.
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
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
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>