The button component should be used when the user needs to take an action. The text or icon used in the button should be clear and concise, communicating the action the button will take.
Action
Shows different button action styles: default, secondary, flat, and inline.
code
<section bp-layout="inline gap:xs block:center">
<bp-button>default</bp-button>
<bp-button action="secondary">secondary</bp-button>
<bp-button action="flat">flat</bp-button>
<bp-button action="inline">inline</bp-button>
</section>Status
Demonstrates buttons with different status colors for various contexts.
code
<script type="module">
import '@blueprintui/components/include/button.js';
</script>
<section bp-layout="inline gap:xs">
<bp-button>default</bp-button>
<bp-button status="accent">accent</bp-button>
<bp-button status="success">success</bp-button>
<bp-button status="warning">warning</bp-button>
<bp-button status="danger">danger</bp-button>
</section>Secondary
Shows secondary button style with different status types.
code
<section bp-layout="inline gap:xs">
<bp-button action="secondary">default</bp-button>
<bp-button action="secondary" status="accent">accent</bp-button>
<bp-button action="secondary" status="success">success</bp-button>
<bp-button action="secondary" status="warning">warning</bp-button>
<bp-button action="secondary" status="danger">danger</bp-button>
</section>Small
Demonstrates smaller button size variant.
code
<section bp-layout="inline gap:xs block:center">
<bp-button size="sm">default</bp-button>
<bp-button size="sm" action="secondary">secondary</bp-button>
<bp-button size="sm" action="flat">flat</bp-button>
<bp-button size="sm" action="inline">inline</bp-button>
</section>Pressed
Demonstrates buttons in pressed state across all action types.
code
<script type="module">
import '@blueprintui/components/include/button.js';
</script>
<section bp-layout="inline gap:xs block:center">
<bp-button pressed>default</bp-button>
<bp-button pressed action="secondary">secondary</bp-button>
<bp-button pressed action="flat">flat</bp-button>
<bp-button pressed action="inline">inline</bp-button>
</section>Selected
Shows buttons in selected state across all action types.
code
<script type="module">
import '@blueprintui/components/include/button.js';
</script>
<section bp-layout="inline gap:xs block:center">
<bp-button selected>default</bp-button>
<bp-button selected action="secondary">secondary</bp-button>
<bp-button selected action="flat">flat</bp-button>
<bp-button selected action="inline">inline</bp-button>
</section>Disabled
Shows buttons in disabled state across all action types.
code
<script type="module">
import '@blueprintui/components/include/button.js';
</script>
<section bp-layout="inline gap:xs block:center">
<bp-button disabled>disabled</bp-button>
<bp-button disabled action="secondary">disabled secondary</bp-button>
<bp-button disabled action="flat">disabled flat</bp-button>
<bp-button disabled action="inline">disabled inline</bp-button>
</section>Link
Shows buttons wrapping anchor links for navigation.
code
<section bp-layout="inline gap:xs">
<bp-button><a href="#">link default</a></bp-button>
<bp-button status="accent"><a href="#">link accent</a></bp-button>
<bp-button status="success"><a href="#">link success</a></bp-button>
<bp-button status="warning"><a href="#">link warning</a></bp-button>
<bp-button status="danger"><a href="#">link danger</a></bp-button>
<bp-button disabled><a href="#">link disabled</a></bp-button>
</section>
<section bp-layout="inline gap:xs m-t:sm">
<bp-button action="secondary"><a href="#">link default</a></bp-button>
<bp-button action="secondary" status="accent"><a href="#">link accent</a></bp-button>
<bp-button action="secondary" status="success"><a href="#">link success</a></bp-button>
<bp-button action="secondary" status="warning"><a href="#">link warning</a></bp-button>
<bp-button action="secondary" status="danger"><a href="#">link danger</a></bp-button>
<bp-button action="secondary" disabled><a href="#">link disabled</a></bp-button>
</section>Install
NPM
// npm package
import '@blueprintui/components/include/button.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/button.js/+esm';
</script>Accessibility
- Use a clear, descriptive text label for the button that communicates the action it will take.
- Use aria-label attribute for buttons with icons to provide the text alternative for the icon.
- Ensure proper tab order for keyboard navigation.
- Avoid using complex icons or graphics that might be confusing for visually impaired users.
- Avoid using the title attribute, as it is not read by screen readers.
bp-button
Properties
| Name | Types | Description |
|---|---|---|
action | 'primary' | 'secondary' | 'flat' | 'inline' | Controls the visual styling variant of the button, affecting background, border, and emphasis level |
status | 'accent' | 'success' | 'warning' | 'danger' | Defines the visual status type of the button, affecting its color and semantic meaning |
pressed | boolean | turns the button into a toggle button |
selected | boolean | indicate the current "selected" state of various widgets |
expanded | boolean | indicate if a control is expanded or collapsed |
readonly | boolean | makes the element not mutable, meaning the user can not interact with button |
disabled | boolean | determines if element is mutable or focusable |
type | 'button' | 'submit' | default behavior of the button |
name | string | represents the name of the current |
value | string | determines the current value |
popoverTargetElement | HTMLElement | The target element for the popover https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
popoverTargetAction | | 'toggle' | 'show' | 'hide' | The action to perform on the target popover element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertargetaction |
popovertarget | string | The target popover id https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
command | string | The command property of the HTMLButtonElement interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, commandfor must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
commandFor | string | The command for property of the HTMLButtonElement interface gets and sets the id of the element being controlled by this button. For this to have an effect, command must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
form | HTMLFormElement | |
formAction | string | |
formEnctype | string | |
formMethod | string | |
formNoValidate | boolean | |
formTarget | string | |
labels | NodeListOf | |
validationMessage | string | |
validity | ValidityState | |
willValidate | boolean | |
checkValidity | any | |
reportValidity | any | |
setCustomValidity | any | |
formAssociated | boolean |
Attributes
| Name | Types | Description |
|---|---|---|
action | 'primary' | 'secondary' | 'flat' | 'inline' | Controls the visual styling variant of the button, affecting background, border, and emphasis level |
status | 'accent' | 'success' | 'warning' | 'danger' | Defines the visual status type of the button, affecting its color and semantic meaning |
pressed | boolean | turns the button into a toggle button |
selected | boolean | indicate the current "selected" state of various widgets |
expanded | boolean | indicate if a control is expanded or collapsed |
readonly | boolean | makes the element not mutable, meaning the user can not interact with button |
disabled | boolean | determines if element is mutable or focusable |
type | 'button' | 'submit' | default behavior of the button |
name | string | represents the name of the current element as a string. |
value | string | determines the current value |
popoverTargetElement | HTMLElement | The target element for the popover https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
popovertargetaction | | 'toggle' | 'show' | 'hide' | The action to perform on the target popover element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertargetaction |
popovertarget | string | The target popover id https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
command | string | The command property of the HTMLButtonElement interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, commandfor must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
commandFor | string | The command for property of the HTMLButtonElement interface gets and sets the id of the element being controlled by this button. For this to have an effect, command must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
CSS Properties
| Name | Types | Description |
|---|---|---|
--background | ||
--color | ||
--border | ||
--padding | ||
--min-width | ||
--font-size | ||
--line-height | ||
--text-align |
Slots
| Name | Types | Description |
|---|---|---|
default | button content |