Button

Bootstrap button styles for <button>, <a> and <input> elements.

Bootstrap’s button docs describe the markup and CSS.

Variants

Set the variant as the value of bsButton. An empty value means solid.

HTML

<div class="d-flex flex-wrap gap-2">
  <button type="button" bsButton theme="primary">Solid</button>
  <button type="button" bsButton="outline" theme="primary">Outline</button>
  <button type="button" bsButton="subtle" theme="primary">Subtle</button>
  <button type="button" bsButton="text" theme="primary">Text</button>
  <button type="button" bsButton="link" theme="primary">Link</button>
  <button type="button" bsButton="base">Base</button>
</div>

Themes

Combine any variant with a theme.

<div class="d-flex flex-wrap gap-2">
  @for (theme of themes; track theme) {
    <button type="button" bsButton [theme]="theme">{{ theme }}</button>
  }
</div>

Sizes

Use size for extra small, small and large buttons.

HTML

<div class="d-flex flex-wrap align-items-center gap-2">
  <button type="button" bsButton theme="primary" size="xs">Extra small</button>
  <button type="button" bsButton theme="primary" size="sm">Small</button>
  <button type="button" bsButton theme="primary">Medium</button>
  <button type="button" bsButton theme="primary" size="lg">Large</button>
</div>

Styled, icon and disabled buttons

styled adds a gradient and shadow. icon makes a square button for a single icon; give it an aria-label. Use the native disabled attribute on buttons.

Link

HTML

<div class="d-flex flex-wrap gap-2">
  <button type="button" bsButton theme="primary" styled>Styled</button>
  <button type="button" bsButton theme="success" styled>Styled</button>
  <button type="button" bsButton theme="primary" icon aria-label="Add">+</button>
  <button type="button" bsButton theme="primary" disabled>Disabled</button>
  <a bsButton="outline" theme="secondary" href="#">Link</a>
</div>

API

BsButton

Selector: button[bsButton], a[bsButton], input[bsButton]

Inputs

Name	Type	Default	Description
`bsButton`	`'solid' \| 'outline' \| 'subtle' \| 'text' \| 'link' \| 'base'`	`'solid'`	Visual style.
`theme`	`BsTheme \| null`	`null`	Theme color.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Button size.
`icon`	`boolean`	`false`	Square button for a single icon.
`styled`	`boolean`	`false`	Adds a gradient and shadow.