Quick Action Button

Planned

The quick action button is used to provide contextual actions within a compact space, and can be grouped together or as a standalone call to action.

Quick Action Button

Anatomy

The quick action button component is made up of an avatar component that can be styled to stand out or blend in as needed. Following a similar paradigm as the standard size button, the quick action button comes in varying levels of emphasis: high emphasis, medium emphasis, low emphasis, and with one additional no emphasis level..

High emphasis

Serving as the highest emphasis quick action button, and only appearing within a visual grouping a single time, the main differentiator between this level of emphasis and others is the branded background color. This branded color increases the visibility and demands higher levels of the users attention. The dotted line below is not visible to the user, and only represents the boundary of the quick action button container.

  1. Container
  2. Avatar
  3. Label — Caption (optional)

Medium emphasis

Serving as the next level of emphasis for quick action buttons, medium emphasis instances can appear multiple times within a visual grouping. The main difference between this level of emphasis and others is the background color has a level of opacity that allows the component to live on top of surfaces and allow underlying colors to bleed through. This makes a great option for quick actions that need to live within other components and stand out just a little, while still allowing the content around it to receive higher levels of visibility.  The dotted line below is not visible to the user, and only represents the boundary of the quick action button container.

  1. Container
  2. Avatar
  3. Label — Caption (optional)

Low emphasis

Serving as the next level of emphasis for quick action buttons, low emphasis instances can appear multiple times within a visual grouping. The main difference between this level of emphasis and others is the subtle border that provides some separation from the content around it without demanding much of the users attention. This level of emphasis is great for several actions lined up in a row. The border provides some affordance and an indication of where the touch/click target is, and demands a very low level of user attention. The dotted line below is not visible to the user, and only represents the boundary of the quick action button container.

  1. Container
  2. Avatar
  3. Label — Caption (optional)

No emphasis

Serving as the lowest emphasis quick action button, the main differentiator between this level of emphasis and others is the lack of a background color or border until hovered or pressed. Designed to live on top of surfaces and nested within other components, the varying states do not change in color but varying levels of opacity. This allows the colors below to bleed through each state of the component. In the static state, this level of emphasis actually demands no user attention at all. The dotted line below is not visible to the user, and only represents the boundary of the quick action button container.

  1. Container
  2. Avatar
  3. Label — Caption (optional)

Specs

Color — High emphasis

Element Property Value
Container (static) Background color None
Avatar (static) Background color ∆colorBrandedAffordance
Avatar (static) Border None
Avatar (static) Icon/Text color ∆colorBrandedAffordanceOn
Caption (static) Text color ∆colorPlatformGray900
Container (hover) Background color ∆colorBrandedHover (∆colorBrandedAffordance100)
Avatar (hover) Background color ∆colorBrandedAffordance
Avatar (hover) Border None
Avatar (hover) Icon/Text color ∆colorBrandedAffordanceOn
Caption (hover) Text color ∆colorBrandedAffordance900
Container (pressed) Background color ∆colorBrandedPressed (∆colorBrandedAffordance)
Avatar (pressed) Background color ∆colorBrandedAffordance
Avatar (pressed) Border None
Avatar (pressed) Icon/Text color ∆colorBrandedAffordanceOn
Caption (pressed) Text color ∆colorBrandedAffordanceOn
Container (selected) Background color ∆colorBrandedSelected (∆colorBrandedAffordance200)
Avatar (selected) Background color ∆colorBrandedAffordance
Avatar (selected) Border None
Avatar (selected) Icon/Text color ∆colorBrandedAffordanceOn
Caption (selected) Text color ∆colorBrandedAffordance900

Color — Medium emphasis

Element Property Value
Container (static) Background color None
Avatar (static) Background color ∆colorBrandedAffordance
Avatar (static) Border None
Avatar (static) Icon/Text color ∆colorBrandedAffordanceAccessible (∆colorBrandedAffordance700)
Caption (static) Text color ∆colorBrandedAffordance900
Container (hover) Background color ∆colorBrandedHover (∆colorBrandedAffordance100)
Avatar (hover) Background color ∆colorBrandedHover (∆colorBrandedAffordance100)
Avatar (hover) Border None
Avatar (hover) Icon/Text color ∆colorBrandedAffordanceAccessible
Caption (hover) Text color ∆colorBrandedAffordance900
Container (pressed) Background color ∆colorBrandedPressed (∆colorBrandedAffordance)
Avatar (pressed) Background color ∆colorBrandedPressed (∆colorBrandedAffordance)
Avatar (pressed) Border None
Avatar (pressed) Icon/Text color ∆colorBrandedAffordanceOn
Caption (pressed) Text color ∆colorBrandedAffordanceOn
Container (selected) Background color ∆colorBrandedSelected (∆colorBrandedAffordance200)
Avatar (selected) Background color ∆colorBrandedSelected (∆colorBrandedAffordance200)
Avatar (selected) Border None
Avatar (selected) Icon/Text color ∆colorBrandedAffordance900
Caption (selected) Text color ∆colorBrandedAffordance900

Color — Low emphasis

Element Property Value
Container (static) Background color None
Avatar (static) Background color None
Avatar (static) Border ∆colorBrandedAffordance100
Avatar (static) Icon/Text color ∆colorBrandedAffordanceAccessible
Caption (static) Text color ∆colorBrandedAffordance900
Container (hover) Background color ∆colorBrandedHover (∆colorBrandedAffordance100)
Avatar (hover) Background color None
Avatar (hover) Border ∆colorBrandedHover (∆colorBrandedAffordance100)
Avatar (hover) Icon/Text color ∆colorBrandedAffordanceAccessible
Caption (hover) Text color ∆colorBrandedAffordance900
Container (pressed) Background color ∆colorBrandedPressed (∆colorBrandedAffordance)
Avatar (pressed) Background color None
Avatar (pressed) Border ∆colorBrandedPressed (∆colorBrandedAffordance)
Avatar (pressed) Icon/Text color ∆colorBrandedAffordanceOn
Caption (pressed) Text color ∆colorBrandedAffordanceOn
Container (selected) Background color ∆colorBrandedSelected (∆colorBrandedAffordance200)
Avatar (selected) Background color None
Avatar (selected) Border ∆colorBrandedSelected (∆colorBrandedAffordance200)
Avatar (selected) Icon/Text color ∆colorBrandedAffordance900
Caption (selected) Text color ∆colorBrandedAffordance900

Color — No emphasis

Element Property Value
Container (static) Background color None
Avatar (static) Background color None
Avatar (static) Border None
Avatar (static) Icon/Text color ∆colorBrandedAffordanceAccessible
Caption (static) Text color ∆colorBrandedAffordance900
Container (hover) Background color ∆colorBrandedHover (∆colorBrandedAffordance100)
Avatar (hover) Background color None
Avatar (hover) Border ∆colorBrandedHover (∆colorBrandedAffordance100)
Avatar (hover) Icon/Text color ∆colorBrandedAffordanceAccessible
Caption (hover) Text color ∆colorBrandedAffordance900
Container (pressed) Background color ∆colorBrandedPressed (∆colorBrandedAffordance)
Avatar (pressed) Background color None
Avatar (pressed) Border ∆colorBrandedPressed (∆colorBrandedAffordance)
Avatar (pressed) Icon/Text color ∆colorBrandedAffordanceOn
Caption (pressed) Text color ∆colorBrandedAffordanceOn
Container (selected) Background color ∆colorBrandedSelected (∆colorBrandedAffordance200)
Avatar (selected) Background color None
Avatar (selected) Border ∆colorBrandedSelected (∆colorBrandedAffordance200)
Avatar (selected) Icon/Text color ∆colorBrandedAffordance900
Caption (selected) Text color ∆colorBrandedAffordance900

Color — High Emphasis Embedded

Element Property Value
Avatar (static) Background color ∆colorBrandedAffordance
Avatar (static) Border None
Avatar (static) Icon/Text color ∆colorBrandedAffordanceOn
Avatar (hover) Background color ∆colorBrandedAffordanceHover (∆colorBrandedAffordance600)
Avatar (hover) Border None
Avatar (hover) Icon/Text color ∆colorBrandedAffordanceHoverOn (∆colorBrandedAffordance900)
Avatar (pressed) Background color ∆colorBrandedAffordancePressed (∆colorBrandedAffordance700)
Avatar (pressed) Border None
Avatar (pressed) Icon/Text color ∆colorBrandedAffordancePressedOn (∆colorBrandedAffordance100)
Avatar (selected) Background color ∆colorBrandedAffordanceSelected (∆colorBrandedAffordance500)
Avatar (selected) Border None
Avatar (selected) Icon/Text color ∆colorBrandedAffordanceSelectedOn (∆colorBrandedAffordance900)

Color — Medium Emphasis Embedded

Element Property Value
Avatar (static) Background color ∆colorBrandedAffordance100
Avatar (static) Border None
Avatar (static) Icon/Text color ∆colorBrandedAffordanceAccessible
Avatar (hover) Background color ∆colorBrandedAffordance200
Avatar (hover) Border None
Avatar (hover) Icon/Text color ∆colorBrandedAffordanceAccessible
Avatar (pressed) Background color ∆colorBrandedPressed
(∆colorBrandedAffordance)
Avatar (pressed) Border None
Avatar (pressed) Icon/Text color ∆colorBrandedAffordanceOn
Avatar (selected) Background color ∆colorBrandedSelected (∆colorBrandedAffordance200)
Avatar (selected) Border None
Avatar (selected) Icon/Text color ∆colorBrandedAffordance900

Color — Low Emphasis Embedded 

Element Property Value
Avatar (static) Background color None
Avatar (static) Border ∆colorBrandedAffordance100
Avatar (static) Icon/Text color ∆colorBrandedAffordanceAccessible
Avatar (hover) Background color ∆colorBrandedHover (∆colorBrandedAffordance100)
Avatar (hover) Border ∆colorBrandedHover (∆colorBrandedAffordance100)
Avatar (hover) Icon/Text color ∆colorBrandedAffordanceAccessible
Avatar (pressed) Background color ∆colorBrandedPressed
(∆colorBrandedAffordance)
Avatar (pressed) Border ∆colorBrandedPressed (∆colorBrandedAffordance)
Avatar (pressed) Icon/Text color ∆colorBrandedAffordanceOn
Avatar (selected) Background color ∆colorBrandedSelected (∆colorBrandedAffordance200)
Avatar (selected) Border ∆colorBrandedSelected (∆colorBrandedAffordance200)
Avatar (selected) Icon/Text color ∆colorBrandedAffordance900

Color — No Emphasis Embedded 

Element Property Value
Avatar (static) Background color None
Avatar (static) Border ∆colorBrandedAffordance100
Avatar (static) Icon/Text color ∆colorBrandedAffordanceAccessible
Avatar (hover) Background color ∆colorBrandedHover (∆colorBrandedAffordance100)
Avatar (hover) Border ∆colorBrandedHover (∆colorBrandedAffordance100)
Avatar (hover) Icon/Text color ∆colorBrandedAffordanceAccessible
Avatar (pressed) Background color ∆colorBrandedPressed
(∆colorBrandedAffordance)
Avatar (pressed) Border ∆colorBrandedPressed (∆colorBrandedAffordance)
Avatar (pressed) Icon/Text color ∆colorBrandedAffordanceOn
Avatar (selected) Background color ∆colorBrandedSelected (∆colorBrandedAffordance200)
Avatar (selected) Border ∆colorBrandedSelected (∆colorBrandedAffordance200)
Avatar (selected) Icon/Text color ∆colorBrandedAffordance900

Size

The avatar component is nested within the quick action button component, and is the only part of the quick action button component that can be set to different sizes. While the avatar component can be sized at 24, 32, 40, 64, and 104px, it can only be sized to 24, 32, or 40px within the quick action button. 

Spacing

Size

The avatar component is nested within the quick action button component, and is the only part of the quick action button component that can be set to different sizes. While the avatar component can be sized at 24, 32, 40, 64, and 104px, it can only be sized to 24, 32, or 40px within the quick action button. 

Embedded

At its core, the quick action button is essentially a clickable avatar component, and so all spacing specs for the embedded placement will be the same as the avatar component.

Inline

When using the inline quick action button component as a standalone UI element, follow the spacing below. 

Inline Block

When using the block quick action button component as a standalone UI element, the quick action button’s target area should fill the container completely (this allows the hit targets to be the entire container). The quick action button should be vertically centered within the container, and allow left, center, or right alignment.

Stacked

When using the stacked quick action button component as a standalone UI element, follow the spacing below. 

Stacked Block

When using the stacked block quick action button component as a standalone UI element, follow the spacing below. the quick action button’s target area should fill the container completely (this allows the hit targets to be the entire container). The quick action button should be vertically centered, and allow left, center, or right alignment.


States

Embedded

(The dotted line represents a fully transparent container.)

Inline

(The dotted line represents a fully transparent container.)

Stacked

(The dotted line represents a fully transparent container.)



Theming

Color

See the color specs table for themable colors used.

Shape

The quick action button component inherits the branded shape settings from Theme Builder. 

Embedded

Element Property Value
Container Small ∆shapeBrandedSmall
Avatar Small ∆shapeBrandedSmall

Inline

Since the static quick action button container is transparent, only the hover state is shown below as a shape reference.

Element Property Value
Container Small ∆shapeBrandedSmall
Avatar Small ∆shapeBrandedSmall

Stacked

Since the static quick action button container is transparent, only the hover state is shown below as a shape reference.

Element Property Value
Container Medium ∆shapeBrandedMedium
Avatar Medium ∆shapeBrandedMedium

Spacing

No special theming spacing considerations are needed.

Type

No special theming type considerations are needed.


Placement


Quick action buttons can be used with or without the label, and should be placed within a parent container. When used without a label, it is referred to as embedded. When used with a label, if the label appears underneath the avatar component it’s referred to as stacked. When using the label out to the right of the avatar component, it’s referred to as inline

Embedded

Embedded quick action buttons can be placed in a series, by itself, or aligned to match the content around it. When using the embedded placement, the container used with the other two placement types is not present.


Inline

Inline quick action buttons are best stacked in a vertical series. 

Stacked

Utilize the stacked placement when horizontally aligning multiple actions within the same visual grouping of content. The stacked placement can be placed directly on a base surface, or within a card. If placed within a card, ensure that only one quick action button is placed within each card, and the card would then become the surface on which the action takes place (see card component).

Within cards

When quick action buttons are placed within cards (and the only component in the card is the quick action button) then the container should fill the card. If the quick action button is grouped within cards in addition to other components, then no special treatment is needed.


Behavior

State changes

Interaction Steps Duration Easing Notes Haptics
Hover 1 ∆motionPlatformTimeSlow Applies to the background color, and icon color
Pressed/active 1 ∆motionPlatformTimeNano Applies to the background color, and icon color Selection on trigger
Selected 1 ∆motionPlatformTimeSlow Applies to the background color, and icon color

Developer Docs

Vue Developer Docs

Component documentation coming soon!