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.

Example

default

accent

success

warning

danger

disabled

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>
  <bp-button disabled>disabled</bp-button>
</section>

Outline

default

accent

success

warning

danger

disabled

code

<section bp-layout="inline gap:xs">
  <bp-button action="outline">default</bp-button>
  <bp-button action="outline" status="accent">accent</bp-button>
  <bp-button action="outline" status="success">success</bp-button>
  <bp-button action="outline" status="warning">warning</bp-button>
  <bp-button action="outline" status="danger">danger</bp-button>
  <bp-button action="outline" disabled>disabled</bp-button>
</section>

Small

default

accent

success

warning

danger

disabled

code

<section bp-layout="inline gap:xs">
  <bp-button size="sm">default</bp-button>
  <bp-button size="sm" status="accent">accent</bp-button>
  <bp-button size="sm" status="success">success</bp-button>
  <bp-button size="sm" status="warning">warning</bp-button>
  <bp-button size="sm" status="danger">danger</bp-button>
  <bp-button size="sm" disabled>disabled</bp-button>
</section>

Small Outline

default

accent

success

warning

danger

disabled

code

<section bp-layout="inline gap:xs">
  <bp-button size="sm" action="outline">default</bp-button>
  <bp-button size="sm" action="outline" status="accent">accent</bp-button>
  <bp-button size="sm" action="outline" status="success">success</bp-button>
  <bp-button size="sm" action="outline" status="warning">warning</bp-button>
  <bp-button size="sm" action="outline" status="danger">danger</bp-button>
  <bp-button size="sm" action="outline" disabled>disabled</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' \| 'outline' \| 'flat'`
`status`	`'accent' \| 'success' \| 'warning' \| 'danger'`
`pressed`	`boolean`
`expanded`	`boolean`
`readonly`	`boolean`
`disabled`	`boolean`
`type`	`'button' \| 'submit'`
`name`	`string`
`value`	`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' \| 'outline' \| 'flat'`
`status`	`'accent' \| 'success' \| 'warning' \| 'danger'`
`pressed`	`boolean`
`expanded`	`boolean`
`readonly`	`boolean`
`disabled`	`boolean`
`type`	`'button' \| 'submit'`
`name`	`string`
`value`	`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