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.

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';
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>
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:
<sp-infield-button inline="start" label="Add">
<sp-icon-add></sp-icon-add>
</sp-infield-button>
<sp-infield-button inline="end" label="Add">
<sp-icon-add></sp-icon-add>
</sp-infield-button>
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>
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>
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
- Updated dependencies []:
- @spectrum-web-components/button@1.4.0
- @spectrum-web-components/base@1.4.0
- Updated dependencies []:
- @spectrum-web-components/button@1.3.0
- @spectrum-web-components/base@1.3.0
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
- lock prerelease versions for Spectrum CSS (#5014) (8aa7734)
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
- asset: use core tokens (99e76f4)
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
Note: Version bump only for package @spectrum-web-components/infield-button
- infield-button: add infield-button package (057b885)