JSPM – @spectrum-web-components/action-button@0.0.2-alpha.1403+a6776aa0

Package Exports

@spectrum-web-components/action-button
@spectrum-web-components/action-button/custom-elements.json
@spectrum-web-components/action-button/package.json
@spectrum-web-components/action-button/sp-action-button
@spectrum-web-components/action-button/sp-action-button.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@spectrum-web-components/action-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Description

An <sp-action-button> represents an action a user can take.

Usage

yarn add @spectrum-web-components/action-button

Import the side effectful registration of <sp-action-button> via:

import '@spectrum-web-components/action-button/sp-action-button.js';

When looking to leverage the ActionButton base class as a type and/or for extension purposes, do so via:

import { ActionButton } from '@spectrum-web-components/action-button';

Sizes

Small

Medium

Large

Extra Large

<sp-button-group>
    <sp-action-button size="s">
        Do action
    </sp-action-button>
    <sp-action-button size="s" selected>
        Do action
    </sp-action-button>
    <sp-action-button size="s" disabled>
        Do action
    </sp-action-button>
</sp-button-group>

<sp-button-group>
    <sp-action-button size="m">
        Do action
    </sp-action-button>
    <sp-action-button size="m" selected>
        Do action
    </sp-action-button>
    <sp-action-button size="m" disabled>
        Do action
    </sp-action-button>
</sp-button-group>

<sp-button-group>
    <sp-action-button size="l">
        Do action
    </sp-action-button>
    <sp-action-button size="l" selected>
        Do action
    </sp-action-button>
    <sp-action-button size="l" disabled>
        Do action
    </sp-action-button>
</sp-button-group>

<sp-button-group>
    <sp-action-button size="xl">
        Do action
    </sp-action-button>
    <sp-action-button size="xl" selected>
        Do action
    </sp-action-button>
    <sp-action-button size="xl" disabled>
        Do action
    </sp-action-button>
</sp-button-group>

Variants

Action button with icon

<sp-action-button>
    <sp-icon-edit slot="icon"></sp-icon-edit>
    This is an action button
</sp-action-button>

Icon only action button

<sp-action-button label="Edit">
    <sp-icon-edit slot="icon"></sp-icon-edit>
</sp-action-button>

Emphasized action button

<sp-action-button label="Edit" emphasized selected>
    <sp-icon-edit slot="icon"></sp-icon-edit>
</sp-action-button>

Action button with hold affordance

The use of the hold-affordance attribute signifies that the <sp-action-button> in question will be delivered with a visual affordance that can be used to outline that additional related content can be acquired via further interaction with the button (e.g. a click, longpress, etc.).

<sp-action-group>
    <sp-action-button label="Edit" hold-affordance>
        <sp-icon-edit slot="icon"></sp-icon-edit>
    </sp-action-button>

    <sp-action-button hold-affordance quiet>
        <sp-icon-edit slot="icon"></sp-icon-edit>
    </sp-action-button>

    <sp-action-button hold-affordance selected>
        <sp-icon-edit slot="icon"></sp-icon-edit>
    </sp-action-button>
</sp-action-group>

Toggles

With the application of the toggles attribute, the button will self manage its selected property on click:

<sp-action-button toggles>
    Toggle button
</sp-action-button>