ComboStrap UI - Button

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

The only action attached is to navigate to another page.

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

Go to ComboStrap

• External Link and a secondary type

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

Go to this page via an external link

• With spacing

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

Go to ComboStrap

• With the size attribute

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

Go to ComboStrap

• With colors

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

Go to ComboStrap

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

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 (Default) Secondary Success Danger Warning Info Light Dark

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>

Large Medium Small

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>

Extra High emphasis High emphasis Medium emphasis Low emphasis

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>

Large Elevated button

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>

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

• https://material.io/components/buttons
• https://getbootstrap.com/docs/4.5/components/buttons/