Hierarchy
Buttons, as one of the key UI elements, must have their own hierarchy. This means that the user should be able to easily identify which button is the most important (primary button), which is less important (secondary button) and which presents completely additional information (tertiary button).
Elements with strong, filled backgrounds and shadows attract attention the most, which is why button primary default buttons is built in this way.
A delicate background without shadows is less engaging, so it is well suited for button secondary.
The lack of background and shadow makes the element the least visible. These features characterize the button tertiary.
<button class=" btn btn-primary">Primary</button>
<button class=" btn btn-primary btn-h2">Secondary Level</button>
<button class=" btn btn-primary btn-h3">Tertiary Level</button>
Contextual
Genesis UI includes several predefined button styles, each serving its own semantic purpose.
<button class=" btn btn-primary">Primary</button>
<button class=" btn btn-secondary">Secondary</button>
<button class=" btn btn-info">Info</button>
<button class=" btn btn-warning">Warning</button>
<button class=" btn btn-danger">Danger</button>
<button class=" btn btn-success">Success</button>
<button class=" btn btn-dark">Dark</button>
<button class=" btn btn-light">Light</button>
Neutral
Genesis UI provide additional light and dark colors as Neutral Buttons.
<button class=" btn btn-dark">Dark</button>
<button class=" btn btn-light">Light</button>
Outline
Genesis UI provide buttons when need not the hefty background colors as Outline Buttons.
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-dark">Dark</button>
<button class="btn btn-outline-light">Light</button>
Rounded
Add .btn-rounded class to make the button rounded.
<button class="btn btn-rounded btn-primary ">Primary</button>
<button class="btn btn-rounded btn-secondary">Secondary</button>
<button class="btn btn-rounded btn-info">Info</button>
<button class="btn btn-rounded btn-warning">Warning</button>
<button class="btn btn-rounded btn-danger">Danger</button>
<button class="btn btn-rounded btn-success">Success</button>
<button class="btn btn-rounded btn-dark">Dark</button>
<button class="btn btn-rounded btn-light">Light</button>
Rounded outline
You can use .btn-outline-* and .btn-rounded together to make the button
outline and rounded at the same time.
<button class="btn btn-rounded btn-outline-primary ">Primary</button>
<button class="btn btn-rounded btn-outline-secondary">Secondary</button>
<button class="btn btn-rounded btn-outline-info">Info</button>
<button class="btn btn-rounded btn-outline-warning">Warning</button>
<button class="btn btn-rounded btn-outline-danger">Danger</button>
<button class="btn btn-rounded btn-outline-success">Success</button>
<button class="btn btn-rounded btn-outline-dark">Dark</button>
<button class="btn btn-rounded btn-outline-light">Light</button>
Floating
Use .btn-floatingclass to make a circle button.
To make it works properly you have to put an icon inside. The text will not fit in.
<button class="btn btn-primary btn-sm btn-circle"><i class="fab fa-linkedin-in"></i></button>
<button class="btn btn-warning btn-h2 btn-circle"><i class="fas fa-angle-right"></i></button>
<button class="btn btn-outline-dark btn-lg btn-circle"><i class="far fa-star"></i></button>
<button class="btn btn-success btn-h3 btn-circle"><i class="fab fa-google"></i></button>
Sizes
Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional
sizes.
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary btn-lg">Large</button>
Block buttons
Create responsive stacks of full-width with a mix of our display and gap utilities.
<button class="btn btn-primary btn-block">Block Level Button</button>