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.

Element Property Value
H.E. Button container (static) Background color ∆colorBrandedAffordance
H.E. Button container (static) Border color ∆colorBrandedAffordance
H.E. Button label (static) Text/icon color ∆colorBrandedAffordanceOn
H.E. Button container (hover) Background color ∆colorBrandedAffordanceHover
H.E. Button container (hover) Border color ∆colorBrandedAffordanceHover
H.E. Button label (hover) Text/icon color ∆colorBrandedAffordanceHoverOn
H.E. Button container (pressed/active) Background color ∆colorBrandedAffordanceHover
H.E. Button container (pressed/active) Border color ∆colorBrandedAffordanceHover
H.E. Button label (pressed/active) Text/icon color ∆colorBrandedAffordanceHoverOn
H.E. Button container (selected/loading) Background color ∆colorBrandedAffordance
H.E. Button container (selected/loading) Border color ∆colorBrandedAffordance
H.E. Button label (selected/loading) Text/icon color ∆colorBrandedAffordanceOn
H.E. Button container (disabled) Background color with alpha ∆colorPlatformGray100
∆colorAlphaPlatform400
H.E. Button container (disabled) Border color with alpha ∆colorPlatformGray100
∆colorAlphaPlatform400
H.E. Button label (disabled) Text/icon color with alpha ∆colorPlatformGray900
∆colorAlphaPlatform400
M.E. Button container (static) Background color None
M.E. Button container (static) Border color ∆colorBrandedAffordance
M.E. Button label (static) Text/icon color ∆colorBrandedAffordanceAccessible
M.E. Button container (hover) Background color None
M.E. Button container (hover) Border color ∆colorBrandedAffordanceAccessible
M.E. Button label (hover) Text/icon color ∆colorBrandedAffordanceAccessible
M.E. Button container (pressed/active) Background color None
M.E. Button container (pressed/active) Border color ∆colorBrandedAffordanceAccessible
M.E. Button label (pressed/active) Text/icon color ∆colorBrandedAffordanceAccessible
M.E. Button container (selected/loading) Background color None
M.E. Button container (selected/loading) Border color ∆colorBrandedAffordance
M.E. Button label (selected/loading) Text/icon color ∆colorBrandedAffordanceAccessible
M.E. Button container (disabled) Background color None
M.E. Button container (disabled) Border color with alpha ∆colorPlatformGray100
∆colorAlphaPlatform400
M.E. Button label (disabled) Text/icon color with alpha ∆colorPlatformGray900
∆colorAlphaPlatform400
L.E. Button container (static) Background color None
L.E. Button container (static) Border color None
L.E. Button container (static) Text/icon color ∆colorBrandedAffordanceAccessible
L.E. Button container (hover) Background color ∆colorBrandedHover
L.E. Button container (hover) Border color ∆colorBrandedHover
L.E. Button container (hover) Text/icon color ∆colorBrandedAffordanceAccessible
L.E. Button container (pressed/active) Background color ∆colorBrandedHover
L.E. Button container (pressed/active) Border color ∆colorBrandedHover
L.E. Button container (pressed/active) Text/icon color ∆colorBrandedAffordanceAccessible
L.E. Button container (selected/loading) Background color None
L.E. Button container (selected/loading) Border color None
L.E. Button container (selected/loading) Text/icon color ∆colorBrandedAffordanceAccessible
L.E. Button container (disabled) Background color None
L.E. Button container (disabled) Border color None
L.E. Button label (disabled) Text/icon color with alpha ∆colorPlatformGray900
∆colorAlphaPlatform400
Compact Button container (static) Background color None
Compact Button label (static) Text/icon color ∆colorBrandedAffordanceAccessible
Compact Button container (hover) Background color ∆colorBrandedHover
Compact Button label (hover) Text/icon color ∆colorBrandedAffordanceAccessible
Compact Button container (pressed/active) Background color ∆colorBrandedHover
Compact Button label (pressed/active) Text/icon color ∆colorBrandedAffordanceAccessible
Compact Button container (selected/loading) Background color None
Compact Button label (selected/loading) Text/icon color ∆colorBrandedAffordanceAccessible
Compact Button (disabled) Background color None
Compact Button (disabled) Text/icon color with alpha ∆colorPlatformGray900
∆colorAlphaPlatform400

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

Element Property Value
H.E. Button container (static) Background color ∆colorBrandedAffordance
H.E. Button container (static) Border color ∆colorBrandedAffordance
H.E. Button label (static) Text/icon color ∆colorBrandedAffordanceOn
H.E. Button container (hover) Background color ∆colorBrandedAffordanceHover
H.E. Button container (hover) Border color ∆colorBrandedAffordanceHover
H.E. Button label (hover) Text/icon color ∆colorBrandedAffordanceHoverOn
H.E. Button container (pressed/active) Background color ∆colorBrandedAffordanceHover
H.E. Button container (pressed/active) Border color ∆colorBrandedAffordanceHover
H.E. Button label (pressed/active) Text/icon color ∆colorBrandedAffordanceHoverOn
H.E. Button container (selected/loading) Background color ∆colorBrandedAffordance
H.E. Button container (selected/loading) Border color ∆colorBrandedAffordance
H.E. Button label (selected/loading) Text/icon color ∆colorBrandedAffordanceOn
H.E. Button container (disabled) Background color with alpha ∆colorPlatformGray100
∆colorAlphaPlatform400
H.E. Button container (disabled) Border color with alpha ∆colorPlatformGray100
∆colorAlphaPlatform400
H.E. Button label (disabled) Text/icon color with alpha ∆colorPlatformGray900
∆colorAlphaPlatform400
M.E. Button container (static) Background color None
M.E. Button container (static) Border color ∆colorBrandedAffordance
M.E. Button label (static) Text/icon color ∆colorBrandedAffordance200
M.E. Button container (hover) Background color None
M.E. Button container (hover) Border color ∆colorBrandedHover
M.E. Button label (hover) Text/icon color ∆colorBrandedHover
M.E. Button container (pressed/active) Background color None
M.E. Button container (pressed/active) Border color ∆colorBrandedHover
M.E. Button label (pressed/active) Text/icon color ∆colorBrandedHover
M.E. Button container (selected/loading) Background color None
M.E. Button container (selected/loading) Border color ∆colorBrandedAffordance
M.E. Button label (selected/loading) Text/icon color ∆colorBrandedAffordance200
M.E. Button container (disabled) Background color None
M.E. Button container (disabled) Border color with alpha ∆colorPlatformGray100
∆colorAlphaPlatform400
M.E. Button label (disabled) Text/icon color with alpha ∆colorPlatformGray100
∆colorAlphaPlatform400
L.E. Button container (static) Background color None
L.E. Button container (static) Border color None
L.E. Button container (static) Text/icon color ∆colorBrandedAffordance200
L.E. Button container (hover) Background color ∆colorBrandedHover
L.E. Button container (hover) Border color ∆colorBrandedHover
L.E. Button container (hover) Text/icon color ∆colorBrandedAffordanceAccessible
L.E. Button container (pressed/active) Background color ∆colorBrandedHover
L.E. Button container (pressed/active) Border color ∆colorBrandedHover
L.E. Button container (pressed/active) Text/icon color ∆colorBrandedAffordanceAccessible
L.E. Button container (selected/loading) Background color None
L.E. Button container (selected/loading) Border color None
L.E. Button container (selected/loading) Text/icon color ∆colorBrandedAffordance200
L.E. Button container (disabled) Background color None
L.E. Button container (disabled) Border color None
L.E. Button label (disabled) Text/icon color with alpha ∆colorPlatformGray100
∆colorAlphaPlatform400
Compact Button container (static) Background color None
Compact Button label (static) Text/icon color ∆colorBrandedAffordance200
Compact Button container (hover) Background color ∆colorBrandedHover
Compact Button label (hover) Text/icon color ∆colorBrandedAffordanceAccessible
Compact Button container (pressed/active) Background color ∆colorBrandedHover
Compact Button label (pressed/active) Text/icon color ∆colorBrandedAffordanceAccessible
Compact Button container (selected/loading) Background color None
Compact Button label (selected/loading) Text/icon color ∆colorBrandedAffordance200
Compact Button (disabled) Background color None
Compact Button (disabled) Text/icon color with alpha ∆colorPlatformGray100
∆colorAlphaPlatform400

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, skeleton 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 display disabled buttons when 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. In most cases compact buttons should only be used to clear out form groups, reset filters, or otherwise impact user selections within the current view. For this reason, compact buttons should generally not be displayed to the user unless the linked action is readily available.

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. This is when a loading icon could be present.

Skeleton

Skeleton states are used when an UI element is present in the experience, but it is taking the system time to dynamically populate the button content and/or destination. 

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

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.

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
Touch interaction 1. Shrink ∆motionTimeExtraFast ∆motionTimingFunctionStandard Scale at 98% while user maintains contact with a button Selection on trigger
2. Release ∆motionTimeExtraFast ∆motionTimingFunctionStandard 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.

Button resize

Basic and with leading icon buttons will resize when pressed because there is nothing on the trailing end of the button.

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

Trailing icon replace

Button with trailing icon will have the icon be replaced with a loader when pressed.

Interaction Steps Duration Easing Notes Haptics
Icon replacement 1. Icon replace ∆motionTimeNano ∆motionTimingFunctionStandard Trailing icon will be replaced by the loader when pressed.  
  2. Loader appears Loop indefinitely   The loader utilizes a Lottie json file (linked above).  

Developer Docs

Vue Developer Docs

Component documentation coming soon!