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.

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