@spectrum-web-components/infield-button NPM

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

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

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

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

<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>

design-system spectrum adobe adobe-spectrum web components web-components lit-element lit-html component css

@spectrum-web-components/base @spectrum-web-components/button

@everything-registry/sub-chunk-857 @uxds-web-components/number-field @spectrum-web-components/bundle @spectrum-web-components/number-field @swc-react/infield-button

1.2.0

6 months ago

1.7.0-snapshot.20250609112703

2 months ago

1.6.0

4 months ago

0.0.0-20250211061642

6 months ago

0.0.0-20241211110529

8 months ago

1.7.0-snapshot.20250519151006

3 months ago

9 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

6 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

5 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

7 months ago

7 months ago

6 months ago

4 months ago

6 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

6 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

8 months ago

8 months ago

9 months ago

8 months ago

8 months ago

6 months ago

9 months ago

6 months ago

6 months ago

9 months ago

1.6.1-preview-2d9fabee.20250507183133

3 months ago

6 months ago

5 months ago

8 months ago

8 months ago

4 months ago

8 months ago

8 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

6 months ago

8 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

5 months ago

6 months ago

6 months ago

1.7.0-snapshot.20250519143559

3 months ago

8 months ago

6 months ago

8 months ago

5 months ago

2 months ago

5 months ago

5 months ago

8 months ago

1.7.0-snapshot.20250519200040

3 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

3 months ago

4 months ago

6 months ago

6 months ago

4 months ago

0.0.0-modal-performance-20250414163725

4 months ago

6 months ago

6 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

11 months ago

12 months ago

12 months ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago