Note: The planet UI design system is an extension of the bootstrap framework. Please also referer to the bootstrap documentation for best pratices while using the framework.

Buttons

Examples

The Planet design system includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Text Only

<button type="button" class="btn btn-primary">button primary</button>
<button type="button" class="btn btn-danger">button danger</button>
<button type="button" class="btn btn-outline-primary">button outline primary</button>

Icon left

<button type="button" class="btn btn-primary"><i class="fa fa-lg function-apply"></i> button primary</button>
<button type="button" class="btn btn-danger"><i class="fa fa-lg function-cancel"></i> button danger</button>
<button type="button" class="btn btn-outline-primary"><i class="fa fa-lg function-edit"></i> button outline primary</button>

Icon right
Note: buttons with icon right need the additional fa-end class applied to account for padding

<button type="button" class="btn btn-primary">button primary <i class="fa fa-lg fa-end function-move-next"></i></button>
<button type="button" class="btn btn-outline-primary">button primary <i class="fa fa-lg fa-end function-move-next"></i></button>