BwButton | bw-button

Overview

Buttons are used to trigger actions in the UI.

Usage

Colors and Variants

Click meClick meClick meClick me

Click meClick meClick meClick me

Click meClick meClick meClick me

<bw-button color="blue" variant="primary">Click me</bw-button>
<bw-button color="blue" variant="secondary">Click me</bw-button>
<bw-button color="blue" variant="tertiary">Click me</bw-button>
<bw-button color="blue" variant="link">Click me</bw-button>

<bw-button color="gray" variant="primary">Click me</bw-button>
<bw-button color="gray" variant="secondary">Click me</bw-button>
<bw-button color="gray" variant="tertiary">Click me</bw-button>
<bw-button color="gray" variant="link">Click me</bw-button>

<bw-button color="red" variant="primary">Click me</bw-button>
<bw-button color="red" variant="secondary">Click me</bw-button>
<bw-button color="red" variant="tertiary">Click me</bw-button>
<bw-button color="red" variant="link">Click me</bw-button>

Pending

Add the pending attribute to the component to disable it and add a loading indicator. It will keep the width it had before entering the state.

Toggle Pending State ➟Submit

<bw-button pending>Submit</bw-button>

Sizes

lgmdsmxs

<bw-button size="lg">lg</bw-button>
<bw-button size="md">md</bw-button>
<bw-button size="sm">sm</bw-button>
<bw-button size="xs">xs</bw-button>

Properties

Property	Attribute	Description	Type	Default
color	color	Color of the button	"blue" | "gray" | "red"	'blue'
disabled	disabled	Disables button	boolean	false
expand	expand	Expands the button to the full width of it's container	boolean	false
form	form	ID of the form to submit the button to. Only use if the button is located outside the form.	string	undefined
pending	pending	Disables the button and shows a loading spinner	boolean	false
size	size	Button size	"lg" | "md" | "sm" | "xs"	'md'
type	type	Can set to submit or reset to participate in forms	string	'button'
variant	variant	Button fill	"link" | "primary" | "secondary" | "tertiary"	'primary'

Slots

Slot	Description
	Pass the content of the button in the default slot

Shadow Parts

Part	Description
"inner-button"	The native button element

CSS Custom Properties

Name	Description
--background	Default background color
--border	Border of the button
--color	Default text color
--font-size	Text size of the button
--gap	Gap size of the button's flex container
--height	Fixed height of the button
--outline-color	Color of the outline when focused
--radius	Border radius of the button

Dependencies

Used by

• bw-datepicker
• bw-dialog
• bw-file-uploader
• bw-icon-button
• bw-select

Depends on

• bw-loading

Graph

---

© 2025 United Systems & Software - All Rights Reserved.