Buttons Component

Default Buttons

Press the button to copy the source code to clipboard. Use any of the available button classes to quickly create a styled button.

PrimarySuccessInfoWarningDangerDarkDefaultSecondaryLink
Button Icons

You can use buttons with icons just add your icon type with .btn-icon-alignment.

Primary Success InfoWarningDanger Dark Default Secondary
Buttons Rounded

Use .btn-roundedto create rounded buttons and .btn-shadowto add shadow to buttons.

Primary ButtonSuccess ButtonInfo ButtonWarning ButtonDanger ButtonDark ButtonDefault ButtonSecondary
Buttons Outline

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-*ones to remove all background images and colors on any button.

Primary ButtonSuccess ButtonInfo ButtonWarning ButtonDanger ButtonDark Button
Button Sizes

Add .btn-lg, .btn-smor .btn-xsto display your button with different sizes.

Buttons Blocks

Create block level buttons those that span the full width of a paren by adding .btn-block.

Active state

If you need to force the same appearance, go ahead and add .active.

Primary linkLink
Disabled state

Make buttons look unclickable by fading them back with opacity.