sp-infield-button

NPM

0.44.0

Storybook

View Storybook
Examples API Changelog

Attributes and Properties #

Property Attribute Type Default Description active active boolean false disabled disabled boolean false Disable this control. It will not receive focus or events download download string | undefined Causes the browser to treat the linked URL as a download. href href string | undefined The URL that the hyperlink points to. label label string | undefined An accessible label that describes the component. It will be applied to aria-label, but not visually rendered. 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 How much of the referrer to send when following the link. rel rel string | undefined The relationship of the linked URL as space-separated link types. tabIndex tabIndex number The tab index to apply to this control. See general documentation about the tabindex HTML property target target '_blank' | '_parent' | '_self' | '_top' | undefined Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). type type 'button' | 'submit' | 'reset' 'button'

Slots #

Name Description default slot text content to be displayed in the Button element icon icon element(s) to display at the start of the 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)

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 #

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 #

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>