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.

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>

States

There are three states that can be set programatically active, disabled and hidden.

Markup

<button pam-Button="active">Active</button>
<button pam-Button="disabled">Disabled</button>
<button pam-Button="hidden">Hidden</button>

Variations

To differentiate what type of action a button has in a set of buttons use primary or secondary.

Markup

<button pam-Button="">Default</button>
<button pam-Button="primary">Primary</button>
<button pam-Button="secondary">Secondary</button>
<button pam-Button="link">Link</button>

Colors

Use one of the colors modifiers to emphasizes the contextual meaning of it's action.

Markup

<button pam-Button="info">Info</button>
<button pam-Button="success">Success</button>
<button pam-Button="warning">Warning</button>
<button pam-Button="danger">Danger</button>

Outlined

The inverse of filled buttons is outlined buttons.

Markup

<button pam-Button="primary outlined">Primary</button>
<button pam-Button="secondary outlined">Secondary</button>
<button pam-Button="info outlined">Info</button>
<button pam-Button="success outlined">Success</button>
<button pam-Button="warning outlined">Warning</button>
<button pam-Button="danger outlined">Danger</button>

Size

Sometimes size matters. Use the small or large modifier to make the button smaller or larger.

Markup

<div sg-Stack>
    <div>
        <button pam-Button="large">Large</button>
        <button pam-Button="large flat">Large</button>
        <button pam-Button="circle large">
            <img sg-mock-button-icon src="kss-assets/img/plus.svg" />
        </button>
    </div>
    <div>
        <button pam-Button>Default</button>
        <button pam-Button="flat">Default</button>
        <button pam-Button="circle">
            <img sg-mock-button-icon src="kss-assets/img/plus.svg" />
        </button>
    </div>
    <div>
        <button pam-Button="small">Small</button>
        <button pam-Button="flat small">Small</button>
        <button pam-Button="circle small">
            <img sg-mock-button-icon src="kss-assets/img/plus.svg" />
        </button>
    </div>
</div>

Raised

Raised buttons add dimension to mostly flat layouts. They emphasize functions on busy or wide spaces.

Markup

<button pam-Button="raised">Default</button>
<button pam-Button="raised primary">Primary</button>

Flat

Flat buttons do not lift and can be used in tooolbars and dialogs.

Markup

<button pam-Button="flat">Default</button>
<button pam-Button="flat primary">Primary</button>

Fluid

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

Markup

<button pam-Button="fluid">Default</button>
<button pam-Button="primary fluid">Primary</button>

Rounded

To get your buttons rounded just add the rounded modifier.

Markup

<button pam-Button="rounded">Default</button>
<button pam-Button="primary rounded">Primary</button>

Fab

A floating action button is used for contextual action floating above other elements.

Markup

<button pam-Button="circle">
   <img sg-mock-button-icon src="kss-assets/img/plus.svg" />
</button>
<button pam-Button="circle raised">
   <img sg-mock-button-icon src="kss-assets/img/plus.svg" />
</button>
<button pam-Button="circle flat">
   <img sg-mock-button-icon src="kss-assets/img/plus.svg" />
</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>

Borderless

Remove the borders from button groups with the borderless modifier.

Markup

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

Size

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

Markup

<div pam-Button-Group="large">
    <button pam-Button>Large</button>
    <button pam-Button>Large</button>
    <button pam-Button>Large</button>
</div>
<div pam-Button-Group>
    <button pam-Button>Default</button>
    <button pam-Button>Default</button>
    <button pam-Button>Default</button>
</div>
<div pam-Button-Group="small">
    <button pam-Button>Small</button>
    <button pam-Button>Small</button>
    <button pam-Button>Small</button>
</div>

Deprecated

Following button rulez will be deprecated in version 1.1.0.

Round

Round button to be used with icons and a direct contextual action.

Deprecated: Legacy round button

Support will be dropped after PAM version 1.1.x. Use the fab buttons instead.

Markup

<button pam-Button="round">
   <img pam-Icon src="kss-assets/img/plus.svg" />
</button>

Text

The text button trait [pam-Button="text"] can be used to adjust the color of a button text.

Deprecated: Text trait buttons

Support will be dropped after PAM version 1.1.x. Use the pam-skin="text" trait instead.

Markup

<button pam-Button="text">Button element</button>
<button pam-Button="text:primary">Button element</button>
<button pam-Button="text:secondary">Button element</button>

.hook-button .hook-button-active .hook-button-circle .hook-button-danger .hook-button-disabled .hook-button-flat .hook-button-fluid .hook-button-group .hook-button-hidden .hook-button-hover .hook-button-info .hook-button-large .hook-button-link .hook-button-primary .hook-button-raised .hook-button-round .hook-button-rounded .hook-button-secondary .hook-button-small .hook-button-success .hook-button-text .hook-button-text-primary .hook-button-text-secondary .hook-button-warning