ComboStrap UI - Button

About

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

The only action attached is to navigate to another page.

Example

Internal link

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

External Link and secondary type

• External Link and a secondary type

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

Spacing

• With spacing

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

Large button

• With the size attribute

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

Colors

• With colors

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

Hover Animation

You can also add hover animation.

• Float

<btn onhover="float">[[:start|Go to ComboStrap]]</btn>

• Zoom

<btn onhover="grow">[[:start|Go to ComboStrap]]</btn>

Syntax

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

or

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

where:

• type defines the default styling
• size defines its size
• skin defines its skin
• elevation adds an elevation

A button can be used:

• in the page content
• in a card
• in a menubar

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>
<btn link>Link</btn>

Size

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>

Skin

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>

Elevation

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.

Example:

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