Button¶

For actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples¶

Colors, outline variants, and sizes/states side by side.

ColorsOutlineSizes & states

Usage

{% include 'bootstrap_components:button' with {
  variant: 'primary',
  size: 'default',
  label: 'Primary',
  icon_position: 'before',
} %}

Usage

{% include 'bootstrap_components:button' with {
  variant: 'outline_primary',
  size: 'default',
  label: 'Primary',
  icon_position: 'before',
} %}

Renders an <a> when a url is set, otherwise a <button>.

Usage

{% include 'bootstrap_components:button' with {
  variant: 'primary',
  size: 'lg',
  label: 'Large',
  icon_position: 'before',
} %}
{% include 'bootstrap_components:button' with {
  variant: 'outline_primary',
  size: 'default',
  label: 'Link as button',
  icon_position: 'before',
  url: '#',
} %}

Props¶

Prop	Type	Description	Example
`variant`	string	Button color style — one of the variant keys below. Defaults to `default`.	`primary`
`size`	string	Button size: `default`, `sm` or `lg`. Defaults to `default`.	`default`
`label`	string (required)	The button label. Plain text. For an icon-only button, set `label_visually_hidden`.	`Click Me`
`icon_name`	string	Icon rendered via Drupal's core Icon API as `pack_id:icon_id`. Leave empty for no icon.	`bootstrap_ui_kit:star-fill`
`icon_position`	string	Place the icon `before` or `after` the label. Defaults to `before`.	`before`
`dismiss`	string	Emits `data-bs-dismiss` so the button closes the component it sits inside: `modal`, `alert`, `offcanvas` or `toast`. A modal footer's "Close" button does nothing without this — only the header's × carries it by default.	`modal`
`url`	string	The button URL. Renders an `<a>` instead of a `<button>` when set.	`/`
`label_visually_hidden`	boolean	Hide the button's label (screen-reader only).	`false`

Variants¶

Variant	Description
`default`	Gets the base `btn` class, no color/size modifier.
`primary` `secondary` `success` `danger` `warning` `info` `light` `dark` `link`	Solid color styles. Combine with `size` for `sm` or `lg`.
`outline_primary` `outline_secondary` `outline_success` `outline_danger` `outline_warning` `outline_info` `outline_light` `outline_dark`	Outline color styles. Combine with `size` for `sm` or `lg`.