ComboStrap UI - Button


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

The only action attached is to navigate to another page.


The button used by default the primary color configuration.

<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


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

Go to ComboStrap

Large button

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

Go to ComboStrap


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

Go to ComboStrap

Hover Animation

You can also add hover animation.

  • Float
<btn hover="float">[[:start|Go to ComboStrap]]</btn>

Go to ComboStrap

  • Zoom
<btn hover="zoom">[[:start|Go to ComboStrap]]</btn>

Go to ComboStrap


<button type size="medium" elevation="false" skin="outline|...">


<btn type size="medium" elevation="false" skin="outline|...">


The button component is a fully super set HTML component and can therefore by styled as you wish

A button can be used:


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>

primary and secondary colors are branding colors and can be configured: Branding Colors (primary, secondary)


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>


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>


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.


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