button

Documentation

Overview

Package button provides a w-button custom element for wings.

Features:

• Semantic variants via the variant attribute (secondary/primary/ghost/danger/success)
• Three sizes (sm/md/lg) and three shapes (default/pill/square)
• Optional loading spinner controlled by loading="true"
• Named slots: prefix (left icon), default (label), suffix (right icon)
• Full ::part() surface for external CSS customisation (root/prefix/label/suffix/spinner)
• Host state attributes for CSS hooks: [variant], [size], [shape], [disabled], [loading]
• Disabled reflected to inner <button> for keyboard and a11y correctness

Usage in parent template

<w-button variant="primary" @click="handler">Save</w-button>
<w-button variant="danger" size="sm" shape="pill">Delete</w-button>
<w-button loading="true">Saving…</w-button>

<!-- icon + label via slots -->
<w-button variant="primary">
  <svg slot="prefix">…</svg>
  Submit
</w-button>

Attributes

• variant — secondary (default) | primary | ghost | danger | success
• size — sm | md (default) | lg
• shape — default | pill | square
• type — like native <button>: inside a <form>, a click submits it (via requestSubmit, so constraint validation runs first) or, with type="reset", resets it; type="button" opts out. Outside a form the attribute is irrelevant.
• loading — "true" to show spinner and keep button non-interactive (also suppresses form submission)
• disabled — standard HTML (reflected to inner <button>; CSS handles visual)

Events fired to parent

Clicks bubble naturally from the inner <button> through the open shadow
root and retarget to <w-button>. Use @click on the host as normal.

CSS Customisation

Button implements wings.Customizable. CSS is split into two parts:

• "Vars" — CSS custom properties (empty by default; defaults live in "Design" as var(--wings-X, fallback)).
• "Design" — Layout and structure rules.

Key tokens consumed: --wings-button-bg/hover-bg/active-bg/border/border-hover, --wings-button-padding, --wings-button-gap, --wings-button-font-weight, --wings-button-disabled-opacity, --wings-primary/primary-color/primary-hover-bg, --wings-primary-pale, --wings-danger/danger-hover, --wings-success/success-hover, --wings-radius-md/pill/xs/sm, --wings-text, --wings-focus-ring, --wings-transition-fast, --wings-hover-lift, --wings-active-scale, --wings-btn-hover-color, --wings-btn-hover-shadow.

Key parts exposed: ::part(root), ::part(prefix), ::part(label), ::part(suffix), ::part(spinner).

Index

• Variables
• type Button
  • func New() *Button
  • func (b *Button) InitData() map[string]any
  • func (b *Button) ListCSS() []wings.CSSPart
  • func (b *Button) Render(obj *wings.PranaObj)
  • func (b *Button) ReplaceCSS(key string, content string)

Variables

var G goose.Alert

G is the logger for this module.

Types

type Button

type Button struct{}

Button implements wings.PranaMod and wings.Customizable for the w-button custom element.

func New

func New() *Button

New creates a new Button instance.

func (*Button) InitData

func (b *Button) InitData() map[string]any

func (*Button) ListCSS

func (b *Button) ListCSS() []wings.CSSPart

ListCSS returns the named CSS parts in order.

func (*Button) Render

func (b *Button) Render(obj *wings.PranaObj)

func (*Button) ReplaceCSS

func (b *Button) ReplaceCSS(key string, content string)

ReplaceCSS replaces the CSS part identified by key and updates all live instances via wings.Update.