Buttons
Default buttons
Quickly create a general button with several predefined button styles, each serving its own semantic purpose.
| Class | Values |
|---|---|
class="btn btn-[value]" |
primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |
Rounded buttons
Create rounded buttons by simply adding .btn-rounded class.
Outline buttons
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 colors on any button.
Sizes
Fancy larger or smaller buttons? Add .btn-lg,.btn-sm or .btn-xs for additional sizes.
Block buttons
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
Disabled State
Make buttons look inactive by adding the disabled boolean attribute to any <button> element. Use .disabled class in link buttons.
Gradient buttons
Prism UI Kit onlyReplace the default modifier class with the .btn-gradient-* once to create gradient button.
| Class | Values |
|---|---|
class="btn btn-gradient-[value]" |
primary / success / warning / danger / info / light / dark / pony / space / streaks / bunting / paradise / heaven / honey / warbler / dusk / citrine / royston / ashes / metal / sunset |
Dropdown & Dropup Buttons
Any single button can be turned into a dropdown toggle with some markup changes. For dropup button, trigger dropdown menus by adding .dropup to the parent element.
Buttons with Icons
Prism UI Kit onlyAn icon can be used as a label for a button. Use .btn-wth-icon class to create button with icon. To change the position of icon to right, simply add .icon-right class.
Social buttons
Social buttons are same as icon buttons with social icons. Create many styles using icon button classes.
Icons buttons
Prism UI Kit onlyA button can have a single icon also. Create icon buttons using .btn-icon class For circle buttons add .btn-icon-circle class.
Icon Button Styles
Prism UI Kit comes with different animation styles to create interest in regular style icon buttons.
Style 1
Style 2
Style 3
Style 4
Style 5
Button group
Wrap a series of buttons with .btn in .btn-group.
Button toolbar
Sizing
Nesting
Button group vertical
Make a set of buttons appear vertically stacked rather than horizontally.