Buttons
- Home
- UI Kit
- Buttons
Default
Use the button classes on an <a>, <button>, or <input> element.
Rounded
Add .btn-rounded to get rounded corners.
Outline
Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.
Border width
Use .b-a-width-* to change button's border width.
Disabled
Add the disabled attribute.
Block
Create block level buttons by adding .btn-block.
Icon
Buttons with icons
Width
Create buttons with minimum width by adding .w-min-xs, .w-min-sm, .w-min-md or .w-min-lg.
Size
Add .btn-lg or .btn-sm for additional sizes.
Group
Wrap a series of buttons with .btn in .btn-group.
Label
Add <span> with class .btn-label and any icon inside it.
Circle
Use class .btn-circle
Square
Use class .btn-square
Button plugin
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
Social
Use class .btn-@yoursocial