Skip to content

button.md

Latest commit

 

History

History
107 lines (79 loc) · 3.02 KB

button.md

File metadata and controls

107 lines (79 loc) · 3.02 KB

Button

The bq-button component is a versatile, accessible button element supporting multiple variants, sizes, loading states, accessible naming overrides, and icon slots.

Basic Usage

<bq-button>Click me</bq-button>
<bq-button variant="secondary">Secondary</bq-button>
<bq-button variant="outline">Outline</bq-button>
<bq-button variant="ghost">Ghost</bq-button>
<bq-button variant="danger">Delete</bq-button>

Sizes

<bq-button size="sm">Small</bq-button>
<bq-button size="md">Medium</bq-button>
<bq-button size="lg">Large</bq-button>
<bq-button size="xl">Extra Large</bq-button>

Loading State

<bq-button loading>Loading…</bq-button>

When loading is enabled, the inner control exposes aria-busy="true" and adds a localized screen-reader-only loading announcement.

Disabled State

<bq-button disabled>Disabled</bq-button>

As a Link

<bq-button href="https://example.com" target="_blank">
  Open link
</bq-button>

Links opened in a new tab automatically receive rel="noopener noreferrer".

With Icons (Slots)

<bq-button>
  <span slot="prefix-icon">⬆</span>
  Upload
</bq-button>

<bq-button variant="outline">
  Download
  <span slot="suffix-icon">⬇</span>
</bq-button>

If you need an icon-only action, prefer bq-icon-button. If you intentionally render bq-button without visible text, provide a label so assistive technologies still announce a meaningful name.

<bq-button label="Refresh results">
  <span slot="prefix-icon" aria-hidden="true">↻</span>
</bq-button>

Properties

Property Type Default Description
variant primary | secondary | outline | ghost | danger primary Visual style
size sm | md | lg | xl md Button size
disabled boolean false Disables interaction
loading boolean false Shows spinner, disables interaction
type button | submit | reset button Form submission type
href string — Renders as <a> when set
target string — Link target (used with href)
label string — Optional accessible label override, especially useful for icon-only usage

Events

Event Detail Description
bq-click { originalEvent: MouseEvent } Fired on click (not fired when disabled/loading)

Slots

Slot Description
(default) Button label / content
prefix-icon Icon before the label
suffix-icon Icon after the label

CSS Parts

Part Description
button The inner <button> or <a> element

Accessibility Notes

  • Use the default slot for the visible button text whenever possible.
  • Provide label when the control has no visible text content.
  • Loading buttons keep their current content visible, set aria-busy, and expose a localized loading announcement for assistive technologies.