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.
Anatomy
The quick action button component is made up of a container, an avatar component that can be styled to stand out or blend in as needed, and an optional label. 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 once within a visual grouping, 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.
Container
Avatar
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.
Container
Avatar
Label — Caption (optional)
Low emphasis
Serving as the next level of emphasis for quick action buttons, low emphasis instances can also 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.
Container
Avatar
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 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.
Please note: By default, all Quick Action Button color treatments use the Affordance color ramp; however when the Quick Action Button is used as a navigational element, the corresponding Guidance color ramp should be used instead. (See mobile top bar as an example)
Elevation
No elevation considerations with the quick action button.
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
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 & Stacked Block
When using the inline block or stacked block quick action button component as a standalone UI element or when appearing within a list, the quick action button’s target area should fill the container completely (this allows the hit targets to fill the entire container and not just the area immediately around the quick action button icon and label). The quick action button icon and label should be vertically and horizontally centered within the container by default, but allow left, or right alignment.
The graphic below shows the quick action button filling the container as a left-aligned list item, and as a vertically & horizontally centered standalone UI element.
Stacked
When using the stacked quick action button component as a standalone UI element, follow the spacing below.
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 underneath it’s referred to as stacked. When using the label out to the right, 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, or when vertical space is limited.
Stacked
Utilize the stacked placement when horizontally aligning multiple actions within the same visual grouping of content, or when creating vertical rhythm. The stacked placement can be placed directly on a base surface, or within a card. If placed within a card, ensure that only one stacked quick action button is placed within each, 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.
.png)
