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

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

Go to ComboStrap

<btn secondary color="yellow">[[|Go to this page via an external link]]</btn>

Go to this page via an external link

3.3 - Spacing

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

Go to ComboStrap

3.4 - Size

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

Go to ComboStrap

3.5 - Colors

<btn color="black" background-color="teal">[[:start|Go to ComboStrap]]</btn>

Go to ComboStrap

4 - Syntax

<button type size="medium" elevation="false">


<btn type size="medium" elevation="false">


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


<box align="center" width="fit-content">
    <btn>[[#|Button 1]]</btn> <btn>[[#|Button 2]]</btn>

6 - For the Geek

This is not the Button as describe by the Web Specification but a styling over a link

7 - Documentation / Reference

Powered by ComboStrap