Custom UI

Button Component

Primary Secondary Success Danger Warning Info Light Dark Text
html 
<app-button data-type="primary">Primary</app-button>
<app-button data-type="secondary">Secondary</app-button>
<app-button data-type="success">Success</app-button>
<app-button data-type="danger">Danger</app-button>
<app-button data-type="warning">Warning</app-button>
<app-button data-type="info">Info</app-button>
<app-button data-type="light">Light</app-button>
<app-button data-type="dark">Dark</app-button>
<app-button data-type="text">Text</app-button>
Primary Secondary Success Danger Warning Info Light Dark
html 
<app-button data-type="primary" data-outline="true">Primary</app-button>
<app-button data-type="secondary" data-outline="true">Secondary</app-button>
<app-button data-type="success" data-outline="true">Success</app-button>
<app-button data-type="danger" data-outline="true">Danger</app-button>
<app-button data-type="warning" data-outline="true">Warning</app-button>
<app-button data-type="info" data-outline="true">Info</app-button>
<app-button data-type="light" data-outline="true">Light</app-button>
<app-button data-type="dark" data-outline="true">Dark</app-button>
Primary Secondary Success Danger Warning Info Light Dark
html 
<app-button data-type="primary" data-size="lg">Primary</app-button>
<app-button data-type="secondary" data-size="lg">Secondary</app-button>
<app-button data-type="success" data-size="lg">Success</app-button>
<app-button data-type="danger" data-size="lg">Danger</app-button>
<app-button data-type="warning" data-size="lg">Warning</app-button>
<app-button data-type="info" data-size="lg">Info</app-button>
<app-button data-type="light" data-size="lg">Light</app-button>
<app-button data-type="dark" data-size="lg">Dark</app-button>
Primary Secondary Success Danger Warning Info Light Dark
html 
<app-button data-type="primary" data-size="sm">Primary</app-button>
<app-button data-type="secondary" data-size="sm">Secondary</app-button>
<app-button data-type="success" data-size="sm">Success</app-button>
<app-button data-type="danger" data-size="sm">Danger</app-button>
<app-button data-type="warning" data-size="sm">Warning</app-button>
<app-button data-type="info" data-size="sm">Info</app-button>
<app-button data-type="light" data-size="sm">Light</app-button>
<app-button data-type="dark" data-size="sm">Dark</app-button>
Primary Secondary Success Danger Warning Info Light Dark
html 
<app-button data-type="primary" disabled="true">Primary</app-button>
<app-button data-type="secondary" disabled="true">Secondary</app-button>
<app-button data-type="success" disabled="true">Success</app-button>
<app-button data-type="danger" disabled="true">Danger</app-button>
<app-button data-type="warning" disabled="true">Warning</app-button>
<app-button data-type="info" disabled="true">Info</app-button>
<app-button data-type="light" disabled="true">Light</app-button>
<app-button data-type="dark" disabled="true">Dark</app-button>
Open Dialog

Dialog

Cerrar
html 
<app-button data-command="show-modal" data-commandTo="dialog-sample">Open Dialog</app-button>
<dialog id="dialog-sample" style="margin: auto; padding: 1rem">
  <h2>Dialog</h2>
  <app-button data-command="close" data-commandTo="dialog-sample">Cerrar</app-button>
</dialog>

Los archivos fuente deben estar ambos en la misma carpeta (por ejemplo, /button).

JavaScript:
button.js
CSS:
button.css

Para usarlo en la página hay que copiar el siguiente código:

javascript 
import {ButtonComponent} from '/button/button.js';
customElements.define('app-button', ButtonComponent);

Para personalizar el componente se pueden modificar las siguientes variables CSS:

css 
app-button[data-type="[data-type-value]"] {
  --btn-base-color: [color-value];
  --btn-color: [color-value];
  --btn-background-color: [background-color-value]; 
  --btn-border-color: [border-color-value]; 
  --btn-hover-color: [color-value]; 
  --btn-hover-background-color: [background-color-value]; 
  --btn-hover-border-color: [border-color-value]; 
  --btn-data-outline-color: [color-value];
  --btn-data-outline-border-color: [border-color-value]; 
  --btn-data-outline-hover-color: [color-value]; 
  --btn-data-outline-hover-background-color: [background-color-value]; 
  --btn-data-outline-hover-border-color: [border-color-value]; 

  --btn-font-size: [font-size-value];
  --btn-font-weight: [font-weight-value];
  --btn-padding: [padding-value];
  --btn-border-radius: [border-radius-value];
}