Pyro

Appearance

Button ​

RC 1.1Kb

Button with styled variants.

js
import 'pyro/button'
Preview Code Stackblitz
Click me

Usage ​

html
<pyro-button variant="primary">Click me</pyro-button>
<!-- el.addEventListener('input', ({event}) => { event.detail }) -->
html
<pyro-button variant="primary" @click="handleClick">Click me</pyro-button>
html
<pyro-button variant="primary" onClick={handleClick}>Click me</pyro-button>

Variations ​

Variants ​

Comes with 3 variants: primary, secondary and tertiary. Those tend to be heavily user styled and can accomodate various meanings, like submitting, canceling or linking associations.

Primary Secondary Tertiary
html
<pyro-button variant="primary">
  Primary
</pyro-button>
<pyro-button variant="secondary">
  Secondary
</pyro-button>
<pyro-button variant="tertiary">
  Tertiary
</pyro-button>

With icon ​

Icon primary
html
<pyro-button variant="primary">
  <pyro-icon slot="icon-right" src="./chevron-down.svg"></pyro-icon>
  Icon primary
</pyro-button>

Transparent ​

Transparent
html
<pyro-button transparent>
  Transparent
</pyro-button>

Circle ​

𝑥
html
<pyro-button circle>
  𝑥
</pyro-button>

Props ​

ts
export interface ButtonProps {
  /** Color variant of the button */
  variant?: 'primary' | 'secondary' | 'tertiary' | '';
  /** Button size */
  size?: 's' | 'm' | 'l';
  /** Enforces a transparent background */
  transparent?: boolean;
  /** Make the button into a circle */
  circle?: boolean;
  /** Disabled */
  disabled?: boolean;
  /** Type, button by default */
  type?: 'button' | 'submit' | 'reset' | 'menu';
  onClick?: () => void;
  children?: any;
}

Slots ​

ts
/**
 * @slot - Contents of the button
 * @slot icon-left - Icon on the left
 * @slot icon-right - Icon on the right
 */

CSS prop theming ​

Button gets a bit of a special treatment in regard to variants, which can be further fine-tuned to have a specific background and text color to accomodate for different usage.

Full theming sheet ​

js
/**
 * @prop {--pyro-button-text-color = --pyro-text-color} - `color`
 * @prop {--pyro-button-font-weight = inherit} - `font-weight`
 * @prop {--pyro-button-spacing = --pyro-spacing} - default size or `padding`
 * @prop {--pyro-button-border = --pyro-border} - `border`
 * @prop {--pyro-button-border-radius = --pyro-border-radius} - `border`
 * @prop {--pyro-button-surface-color = --pyro-surface-color} - default `background`
 * Variant based
 * @prop {--pyro-button-primary-color = --pyro-primary-color} - primary `background`
 * @prop {--pyro-text-color-on-primary = --pyro-text-color-on-primary} - text `color` on primary
 * @prop {--pyro-button-secondary-color = --pyro-secondary-color} - secondary `background`
 * @prop {--pyro-text-color-on-secondary = --pyro-text-color-on-secondary} - text `color` on secondary
 * @prop {--pyro-button-tertiary-color = --pyro-tertiary-color} - tertiary `background`
 * @prop {--pyro-text-color-on-tertiary = --pyro-text-color-on-tertiary} - text `color` on tertiary
 * Prop/attribute based
 * @prop {--pyro-text-color-on-transparent = --pyro-text-color-on-transparent} - text `color` on transparent
 * @prop {--pyro-button-hover-color = --pyro-hover-color} - `:hover` `background`
 * @prop {--pyro-button-disabled-color = --pyro-disabled-color} - disabled `background`
 * @prop {--pyro-button-active-color = none} - `:active` `background`
 */