sp-infield-button
NPM
0.48.1
Storybook
View Storybook
0.48.1 (2024-10-01) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.48.0 (2024-09-17) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.47.2 (2024-09-03) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.47.1 (2024-08-27) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.47.0 (2024-08-20) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.46.0 (2024-08-08) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.45.0 (2024-07-30) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.44.0 (2024-07-15) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.43.0 (2024-06-11) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.42.5 (2024-05-24) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.42.4 (2024-05-14) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.42.3 (2024-05-01) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.42.2 (2024-04-03) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.42.1 (2024-04-02) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.42.0 (2024-03-19) #
Features #
- asset: use core tokens (
99e76f4 )
0.41.2 (2024-03-05) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.41.1 (2024-02-22) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.41.0 (2024-02-13) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.40.5 (2024-02-05) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.40.4 (2024-01-29) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.40.3 (2024-01-11) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.40.2 (2023-12-18) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.40.1 (2023-12-05) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.40.0 (2023-11-16) #
Note: Version bump only for package @spectrum-web-components/infield-button
0.39.4 (2023-11-02) #
Bug Fixes #
- infield-button: add infield-button package (
057b885 )
Attributes and Properties #
active
active
boolean
false
disabled
disabled
boolean
false
download
download
string | undefined
href
href
string | undefined
label
label
string | undefined
referrerpolicy
referrerpolicy
| 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | undefined
rel
rel
string | undefined
tabIndex
tabIndex
number
target
target
'_blank' | '_parent' | '_self' | '_top' | undefined
type
type
'button' | 'submit' | 'reset'
'button'
Slots #
default slot
icon
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>