About
Button is a ComboStrap UI component that implements a button style.
The only action attached is to navigate to another page.
Example
Internal link
The button used by default is the primary color configuration.
<btn>[[:start|Go to ComboStrap]]</btn>
External Link and secondary type
- External Link and a secondary type
<btn secondary color="yellow">[[https://combostrap.com/button|Go to this page via an external link]]</btn>
Spacing
- With spacing
<btn class="p-3">[[:start|Go to ComboStrap]]</btn>
Large button
- With the size attribute
<btn size="large">[[:start|Go to ComboStrap]]</btn>
Colors
- With colors
<btn color="black" background-color="teal">[[:start|Go to ComboStrap]]</btn>
Hover Animation
You can also add hover animation.
- Float
<btn onhover="float">[[:start|Go to ComboStrap]]</btn>
- Zoom
<btn onhover="grow">[[:start|Go to ComboStrap]]</btn>
Syntax
<button type size="medium" elevation="false" skin="outline|...">
</button>
or
<btn type size="medium" elevation="false" skin="outline|...">
</btn>
where:
- type defines the default styling
- size defines its size
- skin defines its skin
- elevation adds an elevation
The button component is a fully super set HTML component
A button can be used:
Type
The type of the button defines its styling:
<btn>Primary (Default)</btn>
<btn secondary>Secondary</btn>
<btn success>Success</btn>
<btn danger>Danger</btn>
<btn warning>Warning</btn>
<btn info>Info</btn>
<btn light>Light</btn>
<btn dark>Dark</btn>
<btn link>Link</btn>
primary and secondary colors are branding colors and can be configured: Branding Colors (primary, secondary)
Size
Button is a component that responds to the size attribute
- small
- medium (default)
- large
<btn size="large" >Large</btn>
<btn >Medium</btn>
<btn size="small">Small</btn>
Skin
Control the more emphasis of your button by using the skin attribute
<btn skin="contained" >Extra High emphasis</btn>
<btn skin="filled">High emphasis</btn>
<btn skin="outline" >Medium emphasis</btn>
<btn skin="text">Low emphasis</btn>
Elevation
All styling attribute are available but you may want to give more emphasis by adding a big shadow around the box with the elevation attribute
<btn shadow="lg" >Large Elevated button</btn>
How to ?
Center two buttons
Buttons are inline elements which means that they can be added in a line and are therefore not a block.
If you want to center two buttons, you need to wrap them in a box element and center it.
Example:
<box align="center" width="fit-content">
<btn>[[#|Button 1]]</btn> <btn skin="outline">[[#|Button 2]]</btn>
</box>