@spectrum-web-components/infield-button

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

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

Small

<sp-infield-button label="Add" size="s">
    <sp-icon-add></sp-icon-add>
</sp-infield-button>

Medium

<sp-infield-button label="Add" size="m">
    <sp-icon-add></sp-icon-add>
</sp-infield-button>

Large

<sp-infield-button label="Add" size="l">
    <sp-icon-add></sp-icon-add>
</sp-infield-button>

Extra Large

<sp-infield-button label="Add" size="xl">
    <sp-icon-add></sp-icon-add>
</sp-infield-button>

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"

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

inline="end"

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

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

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

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>

Changelog

0.48.0 (2024-09-17)

Bug Fixes

• action-menu: dispatch scroll event (#4715) (c76f3f5)
• add null check in updated method of sp-number-field (#4709) (7b1eeab)
• combobox: update selected item state in menu (#4730) (c4cfd2a)
• menu: allow menu-item to support arbitrary element as the submenu root (#4720) (4c6a0dc)
• picker: added a custom class to make :focus-visible styles consistent across all browsers (#4724) (d667d08)
• toast: added ability to wrap toast content with long words (#4738) (302d6fe)

Features

• locale picker in the storybook's decorator (#4687) (9e0cd08)
• reactive-controller: new pending state controller (#4605) (68baf94)