Button

Default use:

Example:

<h-button @click="action">Hello Button</h-button>

Colors:

Example:

<h-button color="primary">primary</h-button>
<h-button color="secondary">secondary</h-button>
<h-button color="success">success</h-button>
<h-button color="danger">danger</h-button>
<h-button color="warn">warn</h-button>
<h-button color="info">info</h-button>

Variantes:

Example:

  <h-button variant="contained" color="primary">contained</h-button>
  <h-button variant="outlined" color="primary">outlined</h-button>
  <h-button variant="text" color="primary">text</h-button>
  <h-button variant="contained" color="secondary">contained</h-button>
  <h-button variant="outlined" color="secondary">outlined</h-button>
  <h-button variant="text" color="secondary">text</h-button>
  <h-button variant="contained" color="success">contained</h-button>
  <h-button variant="outlined" color="success">outlined</h-button>
  <h-button variant="text" color="success">text</h-button>
  <h-button variant="contained" color="danger">contained</h-button>
  <h-button variant="outlined" color="danger">outlined</h-button>
  <h-button variant="text" color="danger">text</h-button>
  <h-button variant="contained" color="warn">contained</h-button>
  <h-button variant="outlined" color="warn">outlined</h-button>
  <h-button variant="text" color="warn">text</h-button>
  <h-button variant="contained" color="info">contained</h-button>
  <h-button variant="outlined" color="info">outlined</h-button>
  <h-button variant="text" color="info">text</h-button>

With icon:

Examples:

  <h-button icon-left="fas fa-home">icon-left</h-button>
  <h-button icon-right="fas fa-user">icon-right</h-button>
  <h-button icon-left="fas fa-home" icon-right="fas fa-user">icon-left and icon-right</h-button>

Sizes:

Examples:

  <h-button size="small">Small</h-button>
  <h-button size="medium">Medium</h-button>

Rounded:

Examples:

  <h-button rounded>Rounded</h-button>
  <h-button :rounded="false">Not rounded</h-button>

Loading

Examples:

<h-button loading>Loading</h-button>

Accessible

Examples:

<h-button accessible>accessible</h-button>
<h-button accessible>accessible</h-button>

Only Icon

Examples:

  <h-button icon-right="fas fa-user" only-icon />

Behaviour

Examples:

  <h-button block>block</h-button>

All html attrs and disabled

Examples:

  <h-button id="my-specific-component">Id</h-button>
  <h-button disabled>disabled</h-button>