Container - App Button Container holds the Text and optional icon. App Button’s width is “dynamically” set to adapt to the width of Text.
Text - is the descriptive text of an App Button explaining the action that this button is performing. It must be concise yet inform users on what will happen next. Use action verbs or phrases, and the first letter of the first word and proper names should be capitalized. For example “Send”, “Send to Pohlcon”, “Book”, etc. Recommended maximum character count is 32 and a good rule of thumb is not to exceed two words in a Button text. If there is a concern that the Text is not explicit enough, more information can be conveyed through a Popover or a Tooltip.
Icon - is an optional property of App Button that can be disabled or enabled in the component properties. App Button can be with no icon or only with one icon at a time. Icons are there to communicate the button’s action visually and to help draw attention. They can be either before text Leading icon; or after Trailing icon. Icons should clearly communicate their meaning and try to decrease the cognitive load for user.
AppButton
Usage
App Buttons communicate actions that users can take that affect the application’s front-end or back-end; They are typically placed throughout the UI, such as in:
- Dialogs
- Modal Windows
- Forms
- Cards
- Toolbars
Unlike links that navigate the users to a different interface, App Buttons let the users to manipulate the data. However, in cases where both data manipulation and navigation are involved we will be using App Button. App Button with an icon conveys meaning quicker, so icons must be added where possible. When you want to use a button without text and only with an icon use FAB. FABs are icon buttons without text and must be used sparingly, only when the action to be performed is descriptive enough with a single icon, keeping in mind users with different geographical and cultural backgrounds. For important, data-invasive actions use App Buttons and not FABs.
Types
There are 5 types of buttons for each brand and size:
- Primary: Is the main button that is often used in applications as the main action in the page (e.g. to submit a form). It reflects the brand-color.
- Secondary: Is used in contrast to and in the same context as Primary button with relatively less emphasis (e.g. to abort the session). It is important to distinguish between a Cancel action that is a Link and Abort action that can be a Secondary Button, as in case of latter, user may lose any progress (data) made in the process.
- Primary-CTA: Is used in rare cases where a high-emphasis call-to-action is required, if there is already an abundant use of Primary button in an interface.
- Secondary-CTA: Is used in contrast to and in the same context as Primary-CTA button with relatively less emphasis.
- Disabled: To indicate that an action is currently unavailable, all button variations can be disabled using "Disabled" property.
- Tertiary: is used for the least important actions in UI. They look similar to Links but differ from them in their functionality. While links navigate user to a different page/section, AppButton Tertiary performs actions, such as opening/closing a section, removing an element, etc. Tertiary button in turn has 2 different style: Brand-color and Dark. Use Brand-color variant when the action needs to be seen for the success of the given flow and Dark one for the least important actions in the given flow.
Anatomy and Behavior
States
App Button can have the states of hover, active, focus, and Disabled.
Gaps and Sizes
- Height: XLplus
- Padding up and down: S
- Container width (default): adapts to the contents’ width (text, icon and paddings)
- Padding left and right: M
- Space between Text Label and Icons: S
- Border radius: 2XS
- Icon size: M
Recommendations for Designers
- Text width: min. XLplus, max. 32 characters (restriction for designer)
INFO
App Button has a property that gives two options; it either allows the button to fill the container it is placed in (in the context of the app UI), or to adapt to its contents’ width
Tokens
SCSS Variable
Value
$appButton-outline-color--focus
--color-azure-45$appButton-primary-bgColor
--bds-brand-primary-color$appButton-primary-color
--color-grey-98$appButton-primary-bgColor--locked
--bds-brand-bgColor--locked$appButton-primary-color--locked
--color-grey-98$appButton-secondary-bgColor
--color-grey-93$appButton-secondary-color
--bds-brand-primary-color$appButton-secondary-bgColor--locked
--color-grey-93$appButton-secondary-color--locked
--bds-brand-primary-color-locked$appButton-secondary-outline-color
--color-grey-86$appButton-secondary-outline-color--locked
--bds-brand-primary-color-locked$appButton-cta-primary-bgColor
--color-grape-86$appButton-cta-primary-color
--color-grey-25$appButton-cta-primary-bgColor--locked
--color-grape-90$appButton-cta-color--locked
--color-grey-70$appButton-cta-secondary-bgColor
--color-grey-98$appButton-cta-secondary-color
--color-grey-40$appButton-cta-secondary-bgColor--locked
--color-grey-98$appButton-cta-secondary-outline-color
--color-grey-86$appButton-cta-secondary-outline-color--locked
--color-grey-86$appButton-tertiary-bgColor
--color-grey-93$appButton-tertiary-color
--bds-brand-primary-color$appButton-tertiary-bgColor--locked
--color-grey-93$appButton-tertiary-color--locked
--bds-brand-primary-color-locked$appButton-tertiary-outline-color
--color-grey-86$appButton-tertiary-outline-color--locked
--bds-brand-primary-color-locked$appButton-tertiaryDark-bgColor
--color-grey-93$appButton-tertiaryDark-color
--color-grey-40$appButton-tertiaryDark-bgColor--locked
--color-grey-93$appButton-tertiaryDark-color--locked
--color-grey-70$appButton-tertiaryDark-outline-color
--color-grey-86$appButton-tertiaryDark-outline-color--locked
--bds-brand-primary-color-locked$appButton-boxShadow
--embossed-2--grey-98$appButton-boxShadow--hover
--embossed-4--grey-98$appButton-boxShadow--locked
none$appButton-primary-boxShadow--hover
--embossed-6--grey-95$appButton-border-radius
--gutter-2xs$appButton-padding-horizontal
--gutter-m$appButton-padding-vertical
--gutter-s$appButton-border-width
0.5px$button-text: %button;
Properties
ts
export type AppButtonProps =
& ElementProps
& TooltipProps
& {
CTA?: boolean;
secondary?: boolean;
tertiary?: boolean;
tertiaryDark?: boolean;
icon?: IconName;
trailingIcon?: boolean;
isLoading?: boolean;
disabled?: boolean;
text?: string | number;
to?: string;
fillContainer?: boolean;
textColor?: string;
};Configurations
| Type | Button | ||||
|---|---|---|---|---|---|
| Default | Leading Icon | Trailing Icon | Loading | Disabled | |
| Default | |||||
| Secondary | |||||
| Tertiary Brand Color | |||||
| Tertiary Dark | |||||
INFO
The CTA variant is deprecated but remains available in development for existing use cases.