GlassButton

A control that starts an action. Styled with a glass border, adapting to the button’s surroundings.

interface GlassButtonSignature {
  Attributes: {
    role?: 'destructive' | 'confirm' // A value that describes the purpose of a button
    'title-key'?: string
  }

  Slots: {
    overlay: HTMLElement[]
  }
}

class GlassButton extends HTMLButtonElement<GlassButtonSignature> {}

declare global {
  interface HTMLButtonElement {
    is: 'glass-button' // <button is="glass-button"></button>
  }
}

Topics

Creating a glass button:

<button is="glass-button">
  <label-view system-image="hand-tap" title="Tap Me"></label-view>
</button>

Relationships

Conforms To

HTMLButtonElement