sp-infield-button

Overview API Changelog

Description

Section titled Description

When composing complex form fields, an <sp-infield-button> can visually associate button functionality with other form fields to delivery enhanced capabilities to your visitors.

Usage

Section titled Usage

See it on NPM! How big is this package in your project?

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

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

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

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

import { InfieldButton } from '@spectrum-web-components/infield-button';

Sizes

Section titled Sizes
Small Medium
<sp-infield-button label="Add" size="m">
    <sp-icon-add></sp-icon-add>
</sp-infield-button>
Large Extra Large

Inline buttons

Section titled Inline buttons

Use the inline attribute to describe whether the <sp-infield-button> should be visually at the start or end of the field is associated to:

inline="start"

Section titled inline="start"
<sp-infield-button inline="start" label="Add">
    <sp-icon-add></sp-icon-add>
</sp-infield-button>

inline="end"

Section titled inline="end"
<sp-infield-button inline="end" label="Add">
    <sp-icon-add></sp-icon-add>
</sp-infield-button>

Stacked buttons

Section titled Stacked buttons

The block attribute can be used to create a vertial stack of buttons. You can place buttons visually on the stack with the start or end values:

<sp-infield-button block="start" label="Increment">
    <sp-icon-add size="xxs"></sp-icon-add>
</sp-infield-button>
<sp-infield-button block="end" label="Decrement">
    <sp-icon-remove size="xxs"></sp-icon-remove>
</sp-infield-button>

Disabled

Section titled Disabled

An <sp-infield-button> with the disabled attribute will become non-interactive and dimmed:

<sp-infield-button disabled inline="start" label="Add">
    <sp-icon-add></sp-icon-add>
</sp-infield-button>

Quiet

Section titled Quiet

An <sp-infield-button> with the quiet attribute will feature a diminished visual presence:

<sp-infield-button inline="start" label="Add" quiet>
    <sp-icon-add></sp-icon-add>
</sp-infield-button>