Buttons

Buttons communicate the action that will occur when the user clicks or touches them. They can be used on button, a or input elements. Use the disabled and hidden modifiers to change state of the button.

Link

Markup

<button pam-Button>Button</button>
<a href="#" pam-Button>Link</a>
<input type="button" value="Input" pam-Button>
<input type="submit" value="Submit" pam-Button>
<input type="reset" value="Reset" pam-Button>
<button pam-Button="disabled">Disabled</button>
<button pam-Button="hidden">Hidden</button>

Variations

There are a number of variation of buttons that can be used to vary the emphasis on the button action.

Default styling

Button

flat

These buttons are used for low-emphasis actions. For example on cards and dialogs.

Button

raised

Increase emphasis by raising the button.

Button

outlined

For medium-emphasis use the outlined button.

Button

rounded

Variation of the default button style.

Button

Markup

<div pam-Button="[modifier]">Button</div>
<button pam-Button="[modifier] icon">
    <i class="material-icons" pam-Button-Icon>android</i>
    <span pam-Button-Label>Icon</span>
</button>

Colors

Use one of the colors modifiers to represent the skin colors and emphasizes the contextual meaning.

Markup

<button pam-Button="">Primary</button>
<button pam-Button="secondary">Secondary</button>
<button pam-Button="info">Info</button>
<button pam-Button="success">Success</button>
<button pam-Button="warning">Warning</button>
<button pam-Button="error">error</button>

Circle

To create a circle button use the circle modifier. Circles are made to only contain icons.

Markup

<button pam-Button="circle">
    <i class="material-icons">add</i>
</button>
<button pam-Button="circle raised">
    <i class="material-icons">add</i>
</button>
<button pam-Button="circle outlined">
    <i class="material-icons">add</i>
</button>
<button pam-Button="circle flat">
    <i class="material-icons">add</i>
</button>

Fab

A floating action button is used for the primary action in an application floating above other elements. A basic fab is created by combining the fab, circle, raised and lg modifiers.

Markup

<button pam-Button="fab circle raised lg">
    <i class="material-icons">add</i>
</button>

Size

Sometimes size matters. Use the sm or lg modifier to make the button smaller or larger.

Default styling

Small button size.

Large button size.

Markup

<button pam-Button="[modifier]">Button</button>
<button pam-Button="[modifier]">
    <i class="material-icons" pam-Button-Icon>android</i>
    <span pam-Button-Label>Icon</span>
</button>
<button pam-Button="circle [modifier]">
    <i class="material-icons">add</i>
</button>

Fluid

Fluid block level buttons span the full width of a parent.

Markup

<button pam-Button="fluid">Primary</button>
<button pam-Button="secondary fluid">Secondary</button>

Link

Use the link modifier to represent a button as a link.

Markup

<button pam-Button="link">Link</button>

Button group

Group two or more buttons together on a single line or column.

Markup

<div pam-Button-Group>
    <button pam-Button="">Button</button>
    <button pam-Button="">Button</button>
    <button pam-Button="">Button</button>
    <button pam-Button="">Button</button>
</div>

Size

Button groups support same sizes as buttons lg, default or small.

Default styling

Small button group

Large button group

Markup

<div pam-Button-Group="[modifier]">
    <button pam-Button>Button</button>
    <button pam-Button>Button</button>
    <button pam-Button>Button</button>
</div>

Hooks

.hook-button .hook-button-circle .hook-button-error .hook-button-disabled .hook-button-flat .hook-button-fluid .hook-button-group .hook-button-group-lg .hook-button-hidden .hook-button-icon .hook-button-info .hook-button-lg .hook-button-link .hook-button-raised .hook-button-round .hook-button-rounded .hook-button-secondary .hook-button-sm .hook-button-success .hook-button-warning

Variables

These are all the component specific variables that can be used for customization.

Name	Value
@button-background	`@skin-primary`
@button-border-color	`@skin-primary`
@button-border-radius	`@border-radius`
@button-border-style	`solid`
@button-border-width	`1px`
@button-border	`@button-border-width @button-border-style @button-border-color`
@button-color	`@skin-on-primary`
@button-darken	`10%`
@button-decoration	`none`
@button-disabled-opacity	`0.4`
@button-font-family	`inherit`
@button-font-size	`@font-size-medium`
@button-font-weight	`@font-weight-medium`
@button-lighten	`10%`
@button-line-height	`@space-36 - 1`
@button-margin	`0 0 0 @space-base`
@button-min-width	`@space-64`
@button-height	`auto`
@button-padding-horizontal	`@space-16`
@button-padding-vertical	`0`
@button-padding	`@button-padding-vertical @button-padding-horizontal`
@button-text-transform	`uppercase`
@button-transition-duration	`@transition-duration-default`
@button-transition-property	`background-color, border-color, box-shadow`
@button-transition-timing	`ease`
@button-white-space	`normal`
@button-secondary-background	`@skin-secondary`
@button-secondary-border-color	`@skin-secondary`
@button-secondary-color	`@skin-on-secondary`
@button-info-background	`@skin-info`
@button-info-border-color	`@skin-info`
@button-info-color	`@skin-on-info`
@button-success-background	`@skin-success`
@button-success-border-color	`@skin-success`
@button-success-color	`@skin-on-success`
@button-warning-background	`@skin-warn`
@button-warning-border-color	`@skin-warning`
@button-warning-color	`@skin-on-warning`
@button-error-background	`@skin-error`
@button-error-border-color	`@skin-error`
@button-error-color	`@skin-on-error`
@button-flat-color	`@skin-primary`
@button-lg-font-size	`@font-size-large`
@button-lg-line-height	`@space-48 - 1`
@button-lg-height	`auto`
@button-lg-padding	`0 @space-16`
@button-sm-font-size	`0.75rem`
@button-sm-line-height	`@space-32 - 2`
@button-sm-height	`auto`
@button-sm-padding	`0 @space-16`
@button-link-background	`transparent`
@button-link-border	`none`
@button-link-color	`@skin-info`
@button-link-decoration	`@button-decoration`
@button-link-hover-color	`darken(@button-link-color, @button-darken)`
@button-link-hover-decoration	`underline`
@button-link-line-height	`@line-height-normal`
@button-link-transition	`color`
@button-fluid-margin-bottom	`@space-base`
@button-fluid-width	`100%`
@button-rounded-border-radius	`@border-radius-rounded`
@button-circle-border-radius	`50%`
@button-circle-line-height	`@line-height-secondary`
@button-circle-padding	`0`
@button-circle-lg-size	`@space-48 - 1`
@button-circle-size	`@space-36 - 1`
@button-circle-sm-size	`@space-32 - 2`
@button-raised-shadow	`@shadow-z2`
@button-raised-active-shadow	`@shadow-z8`
@button-icon-size	`@space-20 - 2`
@button-icon-size-lg	`@space-20`
@button-icon-margin-right	`0 @space-8 0 0`
@button-icon-margin-left	`0 0 0 @space-8`