sp-quick-actions

Examples API

Attributes and Properties #

Property Attribute Type Default Description
dir dir 'ltr' | 'rtl' 'ltr'
opened opened boolean false
textOnly text-only boolean false

Slots #

Name Description
default slot Action Buttons to displayed for quick use

CSS Custom Properties #

Name Default
--spectrum-picker-m-texticon-popover-offset-y var(--spectrum-global-dimension-size-75)
--spectrum-quickactions-background-color var(--spectrum-alias-background-color-quickactions)
--spectrum-quickactions-border-radius var(--spectrum-alias-border-radius-regular)
--spectrum-quickactions-button-gap-x var(--spectrum-global-dimension-size-100)
--spectrum-quickactions-height var(--spectrum-global-dimension-size-500)
--spectrum-quickactions-overlay-color var(--spectrum-alias-background-color-quickactions-overlay)
--spectrum-quickactions-padding-x var(--spectrum-global-dimension-size-50)
--spectrum-quickactions-padding-y var(--spectrum-global-dimension-size-50)
--spectrum-quickactions-text-button-gap-x var(--spectrum-global-dimension-size-50)

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 #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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-quickactions-overlay-color, var(--spectrum-alias-background-color-quickactions-overlay));"
>

<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-quickactions-overlay-color, var(--spectrum-alias-background-color-quickactions-overlay));"
>

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