Button

Approved — Ready for dev

Buttons provide an affordance for the user to understand an action is possible. With varying levels of emphasis, buttons serve as a call to action.

Button

Anatomy

The button component is made up of a surface, label, optional icon, and optional indiscriminate loader — and depending on the needs of the design, comes in varying levels of emphasis: high emphasis, medium emphasis and low emphasis. In very specific use-cases a compact button can be used when space is limited.

High emphasis button

Serving as the highest emphasis call to action possible, this level of button should only appear on screen once. The main differentiator for this level of button is the background color is filled and should demand the highest level of attention in the experience. 

  1. Surface/container
  2. Leading icon (optional)
  3. Label — Button (optional)
  4. Trailing icon (optional)

Medium emphasis button

Serving as a medium emphasis call to action, this level of button can appear as many times as needed throughout an experience. The main differentiator for this level of button is the transparent background color — and while it still appears as a button providing affordance for the user that an action is possible — the visual treatment allows the button to blend in with the surroundings just enough to not compete with a high emphasis button for immediate attention. 

  1. Surface/container
  2. Leading icon (optional)
  3. Label — Button (optional)
  4. Trailing icon (optional)

Medium emphasis buttons, when appearing on a dark surface, receive a dynamic color treatment (see theming section).

Low emphasis button

Serving as the lowest emphasis call to action, this level button can appear as many times as needed throughout an experience. The main differentiator for this level of button is the initial lack of treatment to the container. This visual treatment allows the low emphasis button to fully blend into the experience and not compete with any medium or high emphasis buttons present.

Low emphasis buttons, when appearing on a dark surface, receive a dynamic color treatment (see theming section).

  1. Surface/container (transparent)
  2. Leading icon (optional)
  3. Label — Button (optional)
  4. Trailing icon (optional)

Compact button

When an action is needed to be tucked into a tight spot, and a standard size button would just be too big (bull in a china shop situation), and some surgical placement is needed so as to not disturb the carefully arranged layout, a compact button comes to your rescue! Fix it to the top corner or vertically align it with a set of other UI elements within a header for a nice little way to clear a form, reset a group of controls, or collapse a section of content.

  1. Surface/container (transparent)
  2. Label — Caption

Usage — button copy

As a few general rules of thumb for calls to action:

  • Sentence-case capitalization (unless the FI has chosen in Theme Builder to have all-caps button type treatments)
  • Use common human language; but full and complete sentences are not necessary
  • Begin with a strong action verb
  • Provide clear understanding of what interacting with the button will do (If icons are only present on the button without a text label, the icon should universally signify what the button will do if clicked)
  • Be as concise as possible — consider keeping text limited to 20 characters or less
  • Copy should never wrap to two lines
  • Copy should always be centered within the button unless an icon is used

Specs

Color

When buttons appear on a light surface, use the following color specs.

Note: The value for the ∆colorBrandedAffordancePressed token is manually chosen by the designer until an automated way is determined. In theory this would be two steps darker on the affordance color ramp, but if the affordance color is already dark, then maybe two steps lighter would be better. 

High Emphasis Button
Element Property Value
H.E. Button container (static) Background color ∆colorBrandedAffordance
H.E. Button container (static) Border ∆colorBrandedAffordance
H.E. Button container (static) Text/icon color ∆colorBrandedAffordanceOn
H.E. Button container (hover) Background color ∆colorBrandedAffordanceHover
H.E. Button container (hover) Border ∆colorBrandedAffordanceHover
H.E. Button container (hover) Text/icon color ∆colorBrandedAffordanceHoverOn
H.E. Button container (pressed/active) Background color ∆colorBrandedAffordanceHover
H.E. Button container (pressed/active) Border ∆colorBrandedAffordanceHover
H.E. Button label (pressed/active) Text/icon color ∆colorBrandedAffordancePressedOn
H.E. Button container (selected/loading) Background color ∆colorBrandedAffordanceHover
H.E. Button container (selected/loading) Border ∆colorBrandedAffordanceHover
H.E. Button label (selected/loading) Text/icon color ∆colorBrandedAffordanceHoverOn
H.E. Button container (disabled) Background color ∆colorBrandedAffordance
H.E. Button container (disabled) Border ∆colorBrandedAffordance
H.E. Button label (disabled) Text/icon color ∆colorPlatformAlpha75
Medium Emphasis Button
Element Property Value
M.E. Button container (static) Background color None
M.E. Button container (static) Border ∆colorBrandedAffordance
M.E. Button label (static) Text/icon color ∆colorBrandedAffordanceAccessible
M.E. Button container (hover) Background color ∆colorBrandedAffordance100
M.E. Button container (hover) Border ∆colorBrandedAffordance
M.E. Button label (hover) Text/icon color ∆colorBrandedAffordanceAccessible
M.E. Button container (pressed/active) Background color ∆colorBrandedAffordance
M.E. Button container (pressed/active) Border ∆colorBrandedAffordance
M.E. Button label (pressed/active) Text/icon color ∆colorBrandedAffordanceOn
M.E. Button container (selected/loading) Background color ∆colorBrandedAffordance100
M.E. Button container (selected/loading) Border ∆colorBrandedAffordance
M.E. Button label (selected/loading) Text/icon color ∆colorBrandedAffordanceAccessible
Low Emphasis Button
Element Property Value
L.E. Button container (static) Background color None
L.E. Button container (static) Border None
L.E. Button label (static) Text/icon color ∆colorBrandedAffordanceAccessible
L.E. Button container (hover) Background color ∆colorBrandedAffordance100
L.E. Button container (hover) Border ∆colorBrandedAffordance100
L.E. Button label (hover) Text/icon color ∆colorBrandedAffordanceAccessible
L.E. Button container (pressed/active) Background color ∆colorBrandedAffordance
L.E. Button container (pressed/active) Border ∆colorBrandedAffordance
L.E. Button label (pressed/active) Text/icon color ∆colorBrandedAffordanceOn
L.E. Button container (selected/loading) Background color colorBrandedAffordance200
L.E. Button container (selected/loading) Border ∆colorBrandedAffordance200
L.E. Button label (selected/loading) Text/icon color ∆colorBrandedAffordanceOn
Compact Button
Element Property Value
Compact Button container (static) Background color None
Compact Button label (static) Text/icon color ∆colorBrandedAffordanceAccessible
Compact Button container (hover) Background color ∆colorBrandedAffordance100
Compact Button label (hover) Text/icon color ∆colorBrandedAffordanceAccessible
Compact Button container (pressed/active) Background color ∆colorBrandedAffordance
Compact Button label (pressed/active) Text/icon color ∆colorBrandedAffordanceOn
Compact Button container (selected/loading) Background color ∆colorBrandedAffordance200
Compact Button label (selected/loading) Text/icon color ∆colorBrandedAffordanceOn
Compact Button container (disabled) Background color None
Compact Button label (disabled) Text/icon color ∆colorPlatformAlpha75

When buttons appear on a dark surface, use the following color specs.

High Emphasis Button (on dark surface)
Element Property Value
H.E. Button container (static) Background color ∆colorBrandedAffordance
H.E. Button container (static) Border ∆colorBrandedAffordance
H.E. Button label (static) Text/icon color ∆colorBrandedAffordanceOn
H.E. Button container (hover) Background color ∆colorBrandedAffordanceHover
H.E. Button label (hover) Text/icon color ∆colorBrandedAffordanceHoverOn
H.E. Button container (pressed/active) Background color ∆colorBrandedAffordancePressed
H.E. Button container (pressed/active) Border ∆colorBrandedAffordancePressed
H.E. Button label (pressed/active) Text/icon color ∆colorBrandedAffordancePressedOn
H.E. Button container (selected/loading) Background color ∆colorBrandedAffordanceHover
H.E. Button container (selected/loading) Background color ∆colorBrandedAffordanceHover
H.E. Button label (selected/loading) Text/icon color ∆colorBrandedAffordanceHoverOn
H.E. Button container (disabled) Background color ∆colorBrandedAffordance
H.E. Button container (disabled) Border ∆colorBrandedAffordance
H.E. Button label (disabled) Text/icon color ∆colorPlatformAlpha75
Medium Emphasis (on dark surface)
Element Property Value
M.E. Button container (static) Background color None
M.E. Button container (static) Border ∆colorPlatformWhite
M.E. Button label (static) Text/icon color ∆colorPlatformWhite
M.E. Button container (hover) Background color ∆colorPlatformWhite
M.E. Button container (hover) Border ∆colorPlatformWhite
M.E. Button label (hover) Text/icon color ∆colorBrandedAffordanceAccessible
M.E. Button container (pressed/active) Background color ∆colorBrandedAffordance
M.E. Button container (pressed/active) Border ∆colorBrandedAffordance
M.E. Button label (pressed/active) Text/icon color ∆colorBrandedAffordanceOn
M.E. Button container (selected/loading) Background color ∆colorBrandedAffordance100
M.E. Button container (selected/loading) Border ∆colorBrandedAffordance
M.E. Button label (selected/loading) Text/icon color ∆colorBrandedAffordanceAccessible
Low Emphasis Button (on dark surface)
Element Property Value
L.E. Button container (static) Background color None
L.E. Button container (static) Border None
L.E. Button label (static) Text/icon color ∆colorPlatformWhite
L.E. Button container (hover) Background color ∆colorBrandedAffordance900
∆colorPlatformAlpha25
L.E. Button container (hover) Border None
L.E. Button label (hover) Text/icon color ∆colorPlatformWhite
L.E. Button container (pressed/active) Background color ∆colorBrandedPressed
L.E. Button container (pressed/active) Border ∆colorBrandedPressed
L.E. Button label (pressed/active) Text/icon color ∆colorBrandedAffordanceOn
L.E. Button container (selected/loading) Background color ∆colorBrandedSelected
L.E. Button container (selected/loading) Border ∆colorBrandedSelected
L.E. Button label (selected/loading) Text/icon color ∆colorBrandedAffordanceOn
Compact Button (on dark surface)
Element Property Value
Compact Button container (static) Background color None
Compact Button label (static) Text/icon color ∆colorPlatformWhite
Compact Button container (hover) Background color ∆colorBrandedAffordance900
∆colorPlatformAlpha25
Compact Button label (hover) Text/icon color ∆colorPlatformWhite
Compact Button container (pressed/active) Background color ∆colorBrandedPressed
Compact Button label (pressed/active) Text/icon color ∆colorBrandedAffordanceOn
Compact Button container (selected/loading) Background color ∆colorBrandedSelected
Compact Button label (selected/loading) Text/icon color ∆colorBrandedAffordanceOn
Compact Button container (disabled) Background color None
Compact Button label (disabled) Text/icon color ∆colorPlatformWhite ∆colorPlatformAlpha75

Elevation

Buttons do not have an elevation and should rest directly on the containing surface, unless themed specifically to receive a branded elevation (see theming section).

Spacing

Note: Theoretically two icons can be placed within the button, but in practice only one icon would be shown at a time. The trailing icon is used for showing loading status. When showing the loading status icon, the button text should also change to provide information to the user about the loading status. When this occurs, hide the leading icon. 


States

Depending on the platform one is designing or developing for (iOS, Android, HTML/CSS), the naming convention for states is wildly different. The following explanations attempt to identify all the major states that buttons could have on the major platforms, but ultimately we will refer to button states using the following terminology: active, disabled, focused, hover, pressed, selected and static for experiences on the Alkami Platform.

Active/Pressed

Active buttons are the state in which a user is actively pressing the mouse button down, and only applies to mouse users. This state is essentially the same as the pressed state for touch users — which is when a user is actively resting a finger on the button.

Disabled

Disabled buttons are the state in which a user can see a button interaction is possible in some situations, but not for the current situation. As a general rule, it’s best to not display disabled buttons unless you can provide information to the user on how they can achieve an active button, or unless you want the disabled button to serve as an affordance that a step or process is incomplete and needs additional work to complete the task. Only high emphasis buttons can be disabled. Medium emphasis and low emphasis should either be enabled or hidden.

Focused

The focused state occurs when a keyboard user tabs onto a button, or when a mobile user utilizes the accessibility gestures to target a button (not shown above). The visual treatment of buttons when focused via navigating through the document using the keyboard or mobile OS-level accessibility gestures, is handled by either the OS or the browser, and is not styled in any special way. When interacting with buttons using either a touch or mouse event, the focused state is not applied.

Highlighted

Specific to iOS, the highlighted state is equivalent to the pressed state.

Hover

When mouse users hover over the button with their pointer, the button needs to visually change — indicating an action is imminent if a click event occurs.

Normal

Specific to iOS, the normal state is equivalent to the static state.

Selected

Selected buttons are the state in which a user has already pressed/clicked the button and is awaiting the system to react. Theoretically two icons can be placed within the button, but in practice only one icon would be shown at a time. The trailing icon is used for showing loading status. When showing the loading status icon, the button text should also change to provide information to the user about the loading status. When this occurs, hide the leading icon. 

Static

Static buttons are buttons in which a user interaction is possible, but has not yet been acted upon. 

Theming

Color

See the color table in the Specs section.

Elevation

By default there is no elevation applied to buttons; however, if an FI wants to apply an elevation to the high emphasis button as a part of their branded design language, then we provide the following design tokens to make that happen: 

Element Property Value
H.E. Button container Shadow color ∆surfaceBrandedRaisedShadowColor
H.E. Button container Shadow blur ∆surfacePlatformRaisedShadowBlurPressed
H.E. Button container Shadow opacity ∆surfacePlatformRaisedShadowOpacity
H.E. Button container Shadow spread ∆surfacePlatformRaisedShadowSpread
H.E. Button container Shadow Y ∆surfacePlatformRaisedShadowY

Shape

Note: shape is a selection made by the FI within Theme Builder (sharp, soft, round, squircle), and the radius is based on the size of the component. The button component is considered to be a small component.

Element Property Value
Container Small ∆shapeBranded

Spacing

No spacing considerations are made at a theme level for this component.

Type

Element Property Value
Button label Font family Branded font family
Button label Text transform Branded text transform


Placement

There are two distinct patterns when it comes to the placement of buttons within an experience: F-pattern and Z-pattern

F-pattern placement

The F-pattern is the natural way to progress through content in an unconstrained container. The user will go through the content line by line, arriving at a call to action at the end.

Z-pattern placement

The Z-pattern is the natural way to progress through content in a constrained container (like a dialog or notification), and when tasks are oriented from the top-left and ending with a high emphasis button on the bottom-right of the container. This placement is best suited for layouts with minimal copy and where simplicity is a priority. 

Center aligned

In some instances it makes sense to center align the button if the content and layout call for a centered experience. Only center align content if it’s easily scannable. A good rule of thumb is to ensure copy does not wrap to more than two lines. Once copy becomes a paragraph of information, center aligning makes it difficult for the human eye to successfully track between line breaks.

Mobile vs widescreen

In mobile experiences, layouts are often designed in single columns, and the button should span the full width of the screen unless intentionally designed to be responsive to the button label (see notification component as an example).   

Behavior

Buttons are inherently interactive, and as such should respond to the user's touch with natural movement. Common behaviors for buttons are touch interactions and loading interactions.

Touch interactions

Buttons shrink in response to the user’s touch/click, and release when the user breaks contact. 

Interaction Steps Duration Easing Notes Haptics
1. Shrink ∆motionTimeExtraFast ∆motionEasingStandard Scale at 98% while user maintains contact with a button Selection on trigger
1. Release ∆motionTimeExtraFast ∆motionEasingStandard Return to 100% scaling

Loading interactions

There may be some cases where the action initiated by the button introduces an undefined load time. When such actions are triggered, the button itself should display an indiscriminate loader with some new copy indicating what the system is doing (the new copy shouldn’t just say “Loading” but something more helpful like “Submitting transfer” or “Adding payee”). In general the new copy would likely be the present tense form of the initial verb from the static state. The text label changes as soon as the user releases contact with the button.

Note: Theoretically two icons can be placed within the button, but in practice only one icon would be shown at a time. The trailing icon is used for showing loading status. When showing the loading status icon, the button text should also change to provide information to the user about the loading status. When this occurs, hide the leading icon. 

Button loaders are powered by Lottie animations, and the json can be downloaded on the Tools page under the Lottie Files tab.

Interaction Steps Duration Easing Notes Haptics
1. Button resize ∆motionTimeExtraFast ∆motionEasingStandard If the button needs to resize, it should grow before the loader appears
1. Loader appears Loop indefinitely ∆motionEasingStandard The loader utilizes a Lottie json file


Developer Docs

Vue Developer Docs

Component documentation coming soon!