sp-quick-actions
NPM
0.44.0
Spectrum
View guidelines
Storybook
View Storybook
Try it on
webcomponents.dev
Attributes and Properties #
opened
opened
boolean
false
textOnly
text-only
boolean
false
Slots #
default slot
0.44.0 (2024-07-15) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.43.0 (2024-06-11) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.42.5 (2024-05-24) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.42.4 (2024-05-14) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.42.3 (2024-05-01) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.42.2 (2024-04-03) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.42.1 (2024-04-02) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.42.0 (2024-03-19) #
Bug Fixes #
- theme: deprecate lightest and darkest color stops (
#4179 ) (0c01a66 )
0.41.2 (2024-03-05) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.41.1 (2024-02-22) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.41.0 (2024-02-13) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.40.5 (2024-02-05) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.40.4 (2024-01-29) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.40.3 (2024-01-11) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.40.2 (2023-12-18) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.40.1 (2023-12-05) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.40.0 (2023-11-16) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.39.4 (2023-11-02) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.39.3 (2023-10-18) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.39.2 (2023-10-13) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.39.1 (2023-10-06) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.39.0 (2023-09-25) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.38.0 (2023-09-05) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.37.0 (2023-08-18) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.36.0 (2023-08-18) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.35.0 (2023-07-31) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.34.0 (2023-07-11) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.33.2 (2023-06-14) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.33.0 (2023-06-08) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.32.0 (2023-06-01) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.31.0 (2023-05-17) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.30.0 (2023-05-03) #
Bug Fixes #
- include default export in the "exports" fields (
f32407d ) - include the "types" entry in package.json files (
b432f59 ) - stop merging selectors in a way that alters the cascade (
369388f ) - update latest Spectrum CSS beta releases (
d8d3acc ) - update side effect listings (
8160d3a ) - update to latest spectrum-css packages (
a5ca19f ) - use icons without "size" values (
3fc7c91 ) - use latest @spectrum-css/* versions (
c35eb86 )
Features #
- action-button: add action button pattern (
03ac00a ) - adopt DNA@7 base Spectrum CSS (
e08cafd ) - icons-workflow: vend fully registered icon components (
941f3a4 ) - include all Dev Mode files in side effects (
f70817c ) - quick-actions: add quick-actions pattern (
3664b51 ) - quick-actions: update spectrum css input (
efec525 ) - shared pkg versions, devmode define warning, registry-conflicts docs (
6e49565 ) - use latest exports specification (
a7ecf4b )
0.7.9 (2023-04-24) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.7.8 (2023-04-05) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.7.7 (2023-03-22) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.7.6 (2023-02-08) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.7.5 (2023-01-23) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.7.4 (2023-01-09) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.7.3 (2022-12-08) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.7.2 (2022-11-21) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.7.1 (2022-11-14) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.7.0 (2022-08-09) #
Features #
- include all Dev Mode files in side effects (
f70817c )
0.6.12 (2022-08-04) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.6.11 (2022-07-18) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.6.10 (2022-06-29) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.6.9 (2022-06-07) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.6.8 (2022-05-27) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.6.7 (2022-05-12) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.6.6 (2022-04-21) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.6.5 (2022-03-08) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.6.4 (2022-03-04) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.6.3 (2022-02-22) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.6.2 (2022-01-26) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.6.1 (2021-12-13) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.6.0 (2021-11-08) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.5.1 (2021-11-08) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.5.0 (2021-11-02) #
Features #
- adopt DNA@7 base Spectrum CSS (
e08cafd )
0.4.9 (2021-09-20) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.4.8 (2021-08-24) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.4.7 (2021-07-22) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.4.6 (2021-06-16) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.4.5 (2021-05-12) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.4.4 (2021-04-09) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.4.3 (2021-03-29) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.4.2 (2021-03-22) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.4.1 (2021-03-05) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.4.0 (2021-03-04) #
Features #
- use latest exports specification (
a7ecf4b )
0.3.1 (2021-02-11) #
Bug Fixes #
- update to latest spectrum-css packages (
a5ca19f )
0.3.0 (2021-01-21) #
Bug Fixes #
- include the "types" entry in package.json files (
b432f59 ) - stop merging selectors in a way that alters the cascade (
369388f ) - update latest Spectrum CSS beta releases (
d8d3acc ) - use icons without "size" values (
3fc7c91 ) - use latest @spectrum-css/* versions (
c35eb86 )
Features #
- action-button: add action button pattern (
03ac00a ) - icons-workflow: vend fully registered icon components (
941f3a4 ) - quick-actions: update spectrum css input (
efec525 )
0.2.0 (2021-01-13) #
Bug Fixes #
- include the "types" entry in package.json files (
b432f59 ) - stop merging selectors in a way that alters the cascade (
369388f ) - update latest Spectrum CSS beta releases (
d8d3acc ) - use icons without "size" values (
3fc7c91 ) - use latest @spectrum-css/* versions (
c35eb86 )
Features #
- action-button: add action button pattern (
03ac00a ) - icons-workflow: vend fully registered icon components (
941f3a4 ) - quick-actions: update spectrum css input (
efec525 )
0.1.3 (2020-10-12) #
Note: Version bump only for package @spectrum-web-components/quick-actions
0.1.2 (2020-10-12) #
Bug Fixes #
- include default export in the "exports" fields (
f32407d )
0.1.1 (2020-09-25) #
Bug Fixes #
- update side effect listings (
8160d3a )
0.1.0 (2020-08-31) #
Features #
- quick-actions: add quick-actions pattern (
3664b51 )
Description #
<sp-quick-actions>
allow users to perform contextual actions when hovering or focusing on a specific component. They're shortcuts meant to make workflows more efficient. Spectrum guidelines suggest a <sp-quick-action>
element feature only text buttons OR only icon buttons, and never both.
Usage #
yarn add @spectrum-web-components/quick-actions
Import the side effectful registration of <sp-quick-actions>
via:
import '@spectrum-web-components/quick-actions/sp-quick-actions.js';
When looking to leverage the QuickActions
base class as a type and/or for extension purposes, do so via:
import { QuickActions } from '@spectrum-web-components/quick-actions';
Example #
<div style="padding: 2em; background-color: var(--spectrum-transparent-black-300);" > <sp-quick-actions opened> <sp-action-button quiet label="Info"> <sp-icon-info slot="icon"></sp-icon-info> </sp-action-button> <sp-action-button quiet label="Magnify"> <sp-icon-magnify slot="icon"></sp-icon-magnify> </sp-action-button> <sp-action-button quiet label="Star"> <sp-icon-star slot="icon"></sp-icon-star> </sp-action-button> </sp-quick-actions> </div>
Text Only #
When the buttons have text only, be sure to include the text-only
attribute to ensure correct layout of your actions.
<div style="padding: 2em; background-color: var(--spectrum-transparent-black-300);" > <sp-quick-actions opened text-only> <sp-action-button quiet>Edit</sp-action-button> <sp-action-button quiet>Copy</sp-action-button> <sp-action-button quiet>Delete</sp-action-button> </sp-quick-actions> </div>