Button Component #

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

Properties #

  • colour - 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.

Events #

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');
});

Examples #

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

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

const $button = window.casthub.create('button');
$button.colour = 'secondary';
$button.floating = 'true';
$button.small = 'true';
$button.icon = 'check';