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
defaultsecondaryflatinline
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
defaultaccentsuccesswarningdanger
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
defaultaccentsuccesswarningdanger
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
defaultsecondaryflatinline
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
defaultsecondaryflatinline
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
defaultsecondaryflatinline
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
disableddisabled secondarydisabled flatdisabled inline
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>
Install
NPM
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.
Properties
Name | Types | Description |
---|
accessor |
| determine the visual status state |
action | 'primary' | 'secondary' | 'flat' | 'inline' | |
status | 'accent' | 'success' | 'warning' | 'danger' | |
pressed | boolean | |
selected | boolean | |
expanded | boolean | |
readonly | boolean | |
disabled | boolean | |
type | 'button' | 'submit' | |
name | string | represents the name of the current |
value | string | |
popoverTargetElement | HTMLElement | |
popoverTargetAction | | 'toggle' | 'show' | 'hide' | |
popovertarget | string | |
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 |
---|
accessor |
| determine the visual status state |
popovertargetaction |
| determines the current value |
popovertarget |
| determines the current value |
CSS Properties
Name | Types | Description |
---|
--background |
| |
--color |
| |
--border |
| |
--padding |
| |
--min-width |
| |
--font-size |
| |
--line-height |
| |
--text-align |
| |
Slots
Name | Types | Description |
---|
default |
| button content |