{}

{} {children &&

{children}

}

; };

Buttons trigger actions in the current context — saving, submitting, confirming, or moving forward in a flow. Use emphasis to communicate priority: each view should have one clear primary action, while secondary actions should be visually lower in emphasis. Use a link button for navigation when the intent is to move to another page. See the [Link](#link) variant. ## When to use Use buttons when * The user is taking an action in the current context * The action changes data, state, or progress * The action needs clear visual priority Do not use buttons when * The user is navigating to another page with no side-effect * Several actions compete for equal importance * A text link is sufficient ## Button patterns Some patterns below are standalone `bq-button` usages, while others are composite interactions built from buttons and related components. A standard button initiates a single action or event. Toggles a menu of options without surfacing a primary action. Lets someone take one of several related actions. The dominant action is the label; alternatives are in a menu. The most compact type, used for supplementary actions like "Bookmark" or "Star." Helps people select options, switch views, or sort elements. Floating action buttons (FABs) help people take primary actions. ## Anatomy

A button can contain a label and optional leading or trailing icons. The label should always communicate the action clearly. Icons should reinforce meaning, not replace it — unless the action is universally understood and an accessible `label` prop is provided. | Part | Element | Description | | - | - | - | | **1** | Container | The interactive surface wrapping all content | | **2** | Icon | Optional `prefix` or `suffix` slot content | | **3** | Label | The primary communicator of the action | ## Design guidelines Choose the button variant based on the importance of the action. Use the strongest visual treatment for the main action in a region, keep labels short and specific, and avoid making several actions compete for the same level of emphasis. ## Usage `appearance` defines the base style of the button. `variant` modifies supported appearances — `ghost` applies to both primary and secondary buttons, while `danger` is reserved for destructive actions on the primary appearance. ### Primary The highest priority action in a view. Only one per screen or section. Primary button`}> ```html HTML icon="html5" theme={"theme":{"light":"one-light","dark":"night-owl"}} Primary button ``` ```jsx React icon="react" theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqButton } from "@beeq/react"; Primary button ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqButton } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqButton], template: ` Primary button `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` You don't need to specify any property that uses its default value. The default appearance is `primary` with variant `standard`. Primary also supports `ghost` and `danger` variants: * **Danger**: reserved for actions that may result in critical or irreversible consequences, such as deleting important data or confirming a high-risk operation. * **Ghost**: a more subtle style for secondary or less prominent actions that don't require immediate attention. Primary standard Primary ghost Primary danger `} > ```html HTML icon="html5" theme={"theme":{"light":"one-light","dark":"night-owl"}} Primary standard

Primary ghost

Primary danger ``` ```jsx React icon="react" theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqButton } from "@beeq/react"; Primary standard Primary ghost Primary danger ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqButton } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqButton], template: ` Primary standard

Primary ghost