Button

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

default

secondary

flat

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

default

accent

success

warning

danger

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

default

accent

success

warning

danger

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

default

secondary

flat

inline

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

default

secondary

flat

inline

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

default

secondary

flat

inline

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

disabled

disabled secondary

disabled flat

disabled 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

// 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'`
`status`	`'accent' \| 'success' \| 'warning' \| 'danger'`	determine the visual status state
`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`
`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
`action`	`'primary' \| 'secondary' \| 'flat' \| 'inline'`
`status`	`'accent' \| 'success' \| 'warning' \| 'danger'`	determine the visual status state
`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
`value`	`string`	determines the current value
`popoverTargetElement`	`HTMLElement`
`popovertargetaction`	`\| 'toggle' \| 'show' \| 'hide'`
`popovertarget`	`string`

CSS Properties

Name	Types	Description
`--background`
`--color`
`--border`
`--padding`
`--min-width`
`--font-size`
`--line-height`
`--text-align`

Slots

Name	Types	Description
`default`		button content