ComboStrap UI - Button

1 - About

Button is a ComboStrap UI component that implements a button style.

The only action attached is to navigate to another page.

3 - Example

  • Internal link



<btn>[[:start|Go to ComboStrap]]</btn>




<btn secondary color="yellow">[[https://combostrap.com/button|Go to this page via an external link]]</btn>




<btn class="p-3">[[:start|Go to ComboStrap]]</btn>




<btn size="large">[[:start|Go to ComboStrap]]</btn>




<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:

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

7 - Documentation / Reference