Button Component

The Button Component offers a nice, flat-style Button for Modules to use. It has some customization properties, such as color and an optional Icon.


  • color - Available options are:
    • primary
    • secondary
    • success
    • danger
  • icon - An optional Icon to display in the Button. Available Icons can be found here.
  • icon-position - Whether the Icon (if any) should be left of the text or right. Defaults to left.
  • flat - Set to true to make the Button flat with no shadow/background. Defaults to false.
  • floating - If true, the Button will be a circle with a fixed size. Defaults to false.
  • small - Only used if floating is true, it will make the circular button smaller. Defaults to false.
  • disabled - Whether the Button is disabled or not. If true, it will not emit the click event. Defaults to false.


The Button Component only emits a single event, which is click. Given Components are destroyed when the Module is, you don't need to worry about removing any listeners.

const $button = window.casthub.create('button');
$button.addEventListener('click', () => {
    console.log('Hello world');


const $button = window.casthub.create('button');
$button.color = 'primary';
$button.icon = 'casthub';
$button.iconPosition = 'right';
$button.innerText = 'Hello World';

// Add the Button to the DOM.
// Create a new Element.
this.$newElement = document.createElement('div');

const $button = window.casthub.create('button');
$button.color = 'danger';
$button.icon = 'close';
$button.flat = 'true';
$button.innerText = 'Don\'t Press';
$button.addEventListener('click', () => {
    alert('You shouldn\'t have done that...');

// Append the Button to an existing Element.
const $button = window.casthub.create('button');
$button.color = 'secondary';
$button.floating = 'true';
$button.small = 'true';
$button.icon = 'check';

// Add the Button to the DOM.