ComboStrap UI - Button
Table of Contents
1 - About
Button is a ComboStrap UI component that implements a button style.
The only action attached is to navigate to another page.
2 - Articles Related
3 - Example
- Internal link
<btn>[[:start|Go to ComboStrap]]</btn>
- External Link and a secondary type
<btn secondary color="yellow">[[https://combostrap.com/button|Go to this page via an external link]]</btn>
- With spacing
<btn class="p-3">[[:start|Go to ComboStrap]]</btn>
- With the size attribute
<btn size="large">[[:start|Go to ComboStrap]]</btn>
- With colors
<btn color="black" background-color="teal">[[:start|Go to ComboStrap]]</btn>
4 - Syntax
<button type size="medium" elevation="false">
</button>
or
<btn type size="medium" elevation="false">
</btn>
where:
- type defines the default styling
- size defines its size
- elevation adds an elevation
The button component is a fully super set HTML component and can therefore by styled as you wish
A button can be used:
4.1 - 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>
4.2 - Size
- small
- medium (default)
- large
<btn size="large" >Large</btn>
<btn >Medium</btn>
<btn size="small">Small</btn>
4.3 - Elevation
Give more emphasis to your button by adding a shadow around the box with the elevation attribute
<btn elevation="true" >Elevated button</btn>
5 - How to ?
5.1 - Center two buttons
Buttons are inline element which means that they can be added in a line and are therefore not a box.
If you want to center two buttons, you need to wrap them in a typo element and center it.
Example:
<typo align="center" width="fit-content">
<btn>[[#|Button 1]]</btn> <btn>[[#|Button 2]]</btn>
</typo>
6 - For the Geek
This is not the Button as describe by the Web Specification but a styling over a link