Buttons

Variants, sizes, and states

Bootstrap buttons are about clarity and hierarchy. Start by choosing a variant (primary/secondary/etc.), then size/state based on context.

Button example

Buttons are interactive controls for actions. This example uses the primary variant to represent a main action.

Screenshot: Button exampleClick to open the larger image

Button: Style

Use Style to switch between solid, outline, and semantic variants (primary, secondary, success, etc.).

Screenshot: Button: StyleClick to open the larger image

Button: Size

Use Size for compact toolbars or prominent primary actions.

Screenshot: Button: SizeClick to open the larger image

Button: Block level

Use Block Level to make a button span the full width of its container (great for mobile layouts).

Screenshot: Button: Block levelClick to open the larger image

Button: Type (forms)

Use Type to control form behavior. Use button for normal actions, and submit only when the button should submit a form.

Screenshot: Button: Type (forms)Click to open the larger image

Button: Disabled

Use Disabled when an action is not available. Prefer disabled states over hiding actions when users need to understand what’s possible.

Screenshot: Button: DisabledClick to open the larger image

Tip: Active state

Use Active when a button represents a selected state (for example, toggle buttons or segmented controls).

Screenshot: Tip: Active stateClick to open the larger image

Next steps

Continue with other Components tours or return to the Components menu.