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

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

Go to ComboStrap

<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

Spacing

<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

Colors

<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

Syntax

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

or

<btn type size="medium" elevation="false" skin="outline|...">
</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:

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>

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>

For the Geek

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

Documentation / Reference

Powered by ComboStrap