Skip to end of banner
Go to start of banner

Buttons

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 63 Next »

Description

ONGOING 

A component that allows the user to trigger a "flow defined single action" (e.g. Apply, Continue, Expand) in context to a container its located in (e.g. screen, form, wizard, popup, popover, etc...). 

Example for a table with a row of buttons from different types (icon, Icon + name, split) at the top

Types

Type

Image

Usage

Primary Regular and emphasised

Used for either main or secondary actions on the page/pane/dialog

Icon / icon + label

Buttons used in buttons to better communicate what the button does. 

Split

Used when there are several possible actions  related but only one Enter action (e.g most frequent used).

Toggle 

Used to quickly switch between two possible (e.g. ON/OFF for advanced mode)

Ribbon 

Used in the ribbon pattern. see Ribbon button.

Usage & Behavior

Some examples include Add, Save, Delete, Cancel.

  • Each pane or popup can have one Enter button

  • Any remaining calls-to-action are represented as secondary buttons

General guidelines

Labels

Button labels tell users what will happen when they click the button.

  • Use verbs that describe the action, such as Add or Delete. Use sentence-style capitalisation. 

  • For Sets of Buttons, use specific labels, such as Save or Discard, instead of using OK and Cancel. This is particularly helpful when the user is confirming an action.

Responssiveness 

According to button type

Positioning

See by specific type

States

Buttons states are described according to button type

Interaction (general for all buttons)

  • When hovering, Mouse cursor change
    from pointer

      To Hand

     

  • Clicking (pressing and releasing the left mouse button) on the button target area,  will initiate its action

  • If a user clicked (but didn't release) on a button and moved the mouse cursor:

    • Out of the target area and released the mouse button- the action will not be initiated

    • Out of the target area. Moved it back in the target area and released the mouse button - the action will be initiated

Validations and errors

Transitions

According to button type

Best practices

  • Do not use Buttons as navigational elements. Instead, use Links.

  • In most cases, do not use more than three words for button labels.

    • Choose a button text that is short and meaningful.

  • Avoid acronym as labels in buttons.

Accessibility compliance

Focus management

Set in the general guidelines described in /wiki/spaces/UX/pages/308969693

Screen reader support 

Set in the general guidelines described in  /wiki/spaces/UX/pages/308248620

Contrast & size compliance

Are taken into consideration and embedded in the specific visual design

Design

According to button type


Code




Related

  • No labels