Buttons

buttons.less

Petal features a complex button style generator inside the LESS code to make adding new color sets as simple as possible.


Basic Button

Button

.btn

To make a button, simply add the .btn class, presumably to an <a> or <button> element. The default color is blue, and some preset colors provided are demonstrated below:


Default
Button

.btn

Button

.btn.blue

Button

.btn.green

Button

.btn.red

Button

.btn.black

Button

.btn.white

Button

.btn.disabled

Hollow
Button

.btn.hollow

Button

.btn.hollow.blue

Button

.btn.hollow.green

Button

.btn.hollow.red

Button

.btn.hollow.black

Button

.btn.hollow.white

Button

.btn.hollow.disabled

Options
  • .hollow : Hollow style alternative
  • .disabled OR :disabled (attribute) : Disabled state
  • .ondark on button OR .dark on parent : Alternative style on dark backgrounds
  • .whitetext : Force white text on buttons
  • .compact : Smaller sized buttons with reduced padding

Generating additional color sets

You can add new button colors easily. First add your color as a variable in color-palette.less then add a line in buttons.less.

// Add colors here
&.my-color    { .generate-btn('my-color') }
&.my-color2   { .generate-btn('my-color2'; 'custom') }

The 'custom' option is provided for when you want to specify the l1, l2, d1, d2 shades manually. Define all 5 variables including base color in color-palette.less and append the 'custom' option at the end.


Button groups

Put the .btns inside a .btn-group and they will become inline blocks.


Segmented button groups Requires JavaScript

Add .btn-group-segmented with .btn-group to remove the space inbetween buttons in a button group to make them visually look like segmented buttons. Petal doesn't provide preset functions for segmented buttons, however. You'll need to manually write your javascript code to make them actually work--or, use the radiobox method.

Use .disabled class on buttons to disable each buttons, or add .disabled on the btn-group to disable the whole group.


Toggle Buttons Requires JavaScript

Add data-toggle="toggle" on the button to make it toggleable.


Button Dropdowns Requires JavaScript

<div class="btn-group">
  <button class="btn hollow dropdown" data-toggle="dropdown">Menu <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li class="divider"></li>
    <li class="submenu">
      <a href="#">Submenu 1</a>
      <ul class="dropdown-menu">
        <li><a href="#">Submenu item 1</a></li>
        <li><a href="#">Submenu item 2</a></li>
      </ul>
    </li>
    <li><a href="#">Menu item 3</a></li>
  </ul>
</div>

Attach a <ul> structured list menu with appropriate markups right after the .btn. The .dropdown class and data-toggle="dropdown" attributes are required to activate the toggle function.

The .btn-group class on parent element is not required but is recommended for better layout.


Split button variant

<div class="btn-group btn-split">
  <button class="btn green">Button</button>
  <button class="btn green dropdown" data-toggle="dropdown"><span class="caret"></span></button>
  <ul class="dropdown-menu" data-dropdown-align="right">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
  </ul>
</div>

Create a .btn-group.btn-split wrapper element and make two .btns. Insert span.caret and the required .dropdown class and data-toggle="dropdown" attributes to the second one.

Note: .btn-split class is required along with .btn-group since 0.5.0.

If you're using the .compact option, you need to apply them to both the actual button and the dropdown caret button.

Options

Add data-dropdown-align="right" on ul.dropdown-menuto right align the menu.


Buttons with spinners Requires JavaScript


<!-- Plain button -->
<button class="btn btn-spinner">Save</button>

<!-- With preexisting icon -->
<button class="btn btn-spinner icon-right has-icon">Save <i class="petalicon petalicon-save"></i></button>

Spinners inside buttons are useful when you want to indicate progress following the action called by the button. Just add .btn-spinner class on a .btn, then dynamically append .loading class with javascript to insert an animated spinner.

As the example above, after the progress is finished you can change the .loading class to .loading-done before removing class to indicate end of progress.

Options
  • .has-icon : Use when button already has a Petalicon icon in it (only works for <i class="petalicon ~">)
  • .icon-right : Display spinner on the right / when an icon already exists inside the button (after text)

Note: Hollow style icons are not supported. Compact size icons are supported. When generating custom-colored icons with lighter colors where text is not white, spinner may not appear.


Customizable LESS variables

// buttons 
@btn-border-width: 2px;
@btn-border-radius: 0;
@btn-font-size: 0.9em;
@btn-font-weight: 900;
@btn-letter-spacing: 2px;
@btn-line-height: 1.2;
@btn-dropdown-menu-item-font-size: 0.9em;
@gray-disabled-btn: false;
@btn-disable-transition: false;
@btn-disable-shadows: false;