Bootstrap Button

The <button> element itself. Carries Bootstrap's .btn and variant class (e.g. .btn-primary). All pointer, focus, and keyboard events are attached here.

Bootstrap sets display: inline-flex, user-select: none, and a consistent padding scale via its CSS custom properties.

An optional leading icon rendered via Bootstrap Icons SVG. Marked aria-hidden="true" — the label is the accessible name.

Bootstrap does not define an icon slot natively; this is a common pattern in consuming design systems.

The visible button text. In plain Bootstrap usage this is a direct text node inside the <button>. Wrapping it in a <span> enables independent truncation and styling without affecting the button's flex layout.

A Bootstrap .spinner-border or .spinner-grow element shown during async operations.

Typically toggled via aria-disabled and class manipulation. Communicates loading state to both visual and assistive technology users via role="status".