Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Buttons

Buttons allow users to take actions, and make choices, with a single tap or click. Buttons are used to initialize action, either to go on another page (i.e. call to action on a banner), to act on an item (i.e. save, add or login) or to navigate inside an app (i.e. next or previous)

last modified: 19/08/2022 10:20:10

Types

Buttons are used to initialize action, either to go on another page (i.e. call to action on a banner), to act on an item (i.e. save, add or login) or to navigate inside an app (i.e. next or previous).
Based on the action triggered, different types of buttons are available.

  1. Primary button
    Use this one as the main call to action on interfaces.
  2. Secondary button
    For secondary actions. Great at keeping the eye focused on a page's primary imagery. With properly chosen background and well-outlined contrasting border secondary button attracts attention without giving a user overwhelming impression.
  3. Tertiary button
    Use tertiary buttons in isolation, for less prominent actions, or paired with a Primary or Secondary button, or multiple CTAs around the same subject.

  1. Order/Activate button
    The order/activate call-to-action button allows you to go to the webshop/caddy. This green button is also used at the end of the order flow to validate the order.
  2. Previous/Next button
    Use this one for navigation purpose (e.g. webshop flow or multi-pages forms). Always displayed on the bottom of the section/page/component, aligned at the left. Those button have the same look than a primary and seconday button. Arrow icons are mandatory for previous/next button.

Are you building a form with several components?

Forms can be simple or complex, so we have prepared clear recommendations for you to use. These guidelines will help you build your forms and maintain consistency between all the forms of our digital platforms.
Discover our recommandations to build a form.


States

  1. Default state
    State visible before click.
  2. Hover/Focused state
    State visible when the cursor hovers the button and triggered by keyboard navigation or click. Container & label are displayed in another colour depending of the type of button. Cursor becomes a pointer.
  1. Waiting state
    State visible after click. Waiting dots and a waiting message are displayed to inform the user why he is waiting. This state is looking the same for all the types of button.
  2. Disabled state
    State visible if the button is not clickable. All elements (container & label) are displayed but they are greyed out in order to signify the change of state.

Anatomy

  1. Container
    A container is displayed around the text label with a solid color.
  2. Button label
    Button label is the most important element on a button, as it indicates the action that will be triggered when clicked. Try to be as concise as possible to avoid having big/long buttons.

    Explicit label

    The label alone has to be sufficiently explicit for the users to understand the link purpose and target. Make sure to write a clear and concise label about the action the users are about to perform.

  3. Contextual icon (optional)
    Only available for primary and secondary button. There is no icon by default. When words are not enough, you can use icons to better communicate what the button does. The icon used must be directly related to the action that the users are taking, and displayed at the left of the label, except for next button. Arrow icons are only used for previous/next button.
  4. Action icon
    Only available for tertiary button. The arrow icon is considered as action icon and mandatorily displayed at the right of the label and this is the only icon available for the tertiary button.

Primary & secondary buttons used together

When used next to each other, different button types should be used in order to make the primary action stand out from the rest.

Rounded corner

Combining two buttons happens a lot. In order to keep consistency throughout digital interface, use rounded corner only on the last displayed button.

Do
Secondary button has 4 straigth corners next to a primary button.

Don't
Secondary button with a rounded corner next to a primary button.

Button position

When using multiple buttons next to each other, button should appear in order of prominence from left to right, and top to bottom on mobile (most important one on the right, or top on mobile).

Even though, research has shown that there is no performance or usability issue when display first the primary or secondary action, consistency throughout products and interfaces is crucial.

Therefore, on desktop, you should use buttons in the prescribed order (from left to right): secondary button(s) (without any rounded corners), then, the primary button (with the rounded corner) as last button.

Consequently, it is important to keep consistency in the button positioning. Depending on the situation, you'll position buttons as follow:

Do

Don't

On mobile, the button order changes: the primary button first (without rounded corner because this is not the last button) and the secondary will have a rounded corner as last button.

Do

Don't


A single prominent button by section

Make sure each section contain a single prominent button which emphasizes its role as main action in comparison with other less important buttons.

An interface can show more than one button in a section at a time, so a primary button can be accompanied by secondary and tertiary buttons with less important actions. Please refer to the previous section to know more about Primary & secondary buttons used together

Do
Use a secondary button next to a primary.

Don't
Use multiple primary buttons next to each other.

Usage of multiple primary buttons

Avoid using multiple primary action, as you better keep user focus on one main action. Though, some exception could happen. The rates tables case for instance allow to use multiple primary actions since each product displayed within the tables are at the same level.

Order button

The order button is considered as the primary action and therefore as a primary button. With an order button, we can only use a secondary or tertiary button in the same section.

Do

Don't


Button alignment

Button alignment depends on where they are displayed.

Left aligned

Within section on the commercial website
In forms & multi-steps configurators (webshop,...)
Cancel, previous and next used together

More examples available here

Right aligned

In dashboard, when using cards
In overlayers

Full width

For the primary, secondary and order buttons, the container width is set to the size of the text label with paddings on the left and right on desktop and set it relative to the width of the column on mobile.

On mobile

When displayed on mobile, buttons take the full width of their container by default. If multiple buttons, they stack one on top of each other. It's possible to manualy change it to align the button on the left, with the width based on paddings.

There is an exception for the tertiary button, which is aligned at the right and not take the full width. It's possible to manualy change its alignement too.

In comparative and rates tables.

When displayed on comparative tables, buttons take the full width of their container.


Open in new window

Target_blank

For accessibility reason, give users advanced warning when opening a new window. To provide a warning before automatically opening a new window or tab, we display a target blank icon.

last modified: 30/09/2021 11:10:06

Sizes and colors

last modified: 08/09/2022 10:20:06

In most cases, buttons are links implemented via <a> .
In more specific cases, such as forms, buttons are implemented via <button> (see the <button> section).

On mobile, buttons take the full width of their grid container

To override this behaviour, add class rs-btn-not-wide-so to any button and it will be displayed in auto-width on mobile too, just like it does for desktop/tablet.


Default button

To create a default button, add rs-btn class to the <a> tag.

Add the corresponding classes to create different buttons: rs-btn-order , rs-btn-active ,...

Razor

All @rsButton objects can receive the following parameters:

Name Purpose Default value
txtLabel Label "Button"
sUrl URL "javascript:void(0)"
XtraClass Extra classes ""
IconName Icon class name ""
bIsLeft Icon is on the left false
bNoIcon Button has no icon true
btn Using <button> false
XtraParameters Extra parameters ""
bTargetBlank Target = "_blank" false
bDisabled Is disabled false
bWaiting Is "waiting" type false

Default negative


Order button

There is no difference between the positive and negative versions of the order button.


One-click-buying button

There is no difference between the positive and negative versions of the one-click-buying button.


Secondary button

Button corners

If placed next to another button and if it is not the last button displayed, the secondary button has 4 square corners.

If placed as the last in order or used alone, it always has a rounded bottom-right corner. See "Primary & secondary buttons used together" to understand the corner logic.

Secondary negative button


Primary & secondary buttons used together

When using two or more buttons together, the rule is to always have the rounded corner only on the last button, but that depends on the breakpoint:

  • on desktop the secondary button will be first (then without the rounded corner) while the primary will come next and last (and therefore with a rounded corner)
  • it's the opposite on mobile: the primary button is first (withoutthe rounded corner) and the secondary will be last (and therefore with a rounded corner)

This logic is implemented via the following classes, knowing that "nl" stands for "not last":

Small up Small only Medium up Medium only Large up Large only
rs-btn-nl rs-btn-nl-so rs-btn-nl-m rs-btn-nl-mo rs-btn-nl-l rs-btn-nl-lo

To switch the buttons order, we have to use a flex gridding and the code has to be done mobile first - we always work mobile first.


Tertiary button

Accessibility

Since the purpose of the icon is purely decorative, aria-hidden="true" is added to <i> so that screen readers can ignore it.

Info box

This is visually similar to, but not the same thing as Action Links. Learn more.

Tertiary negative

Tertiary with left icon

Add rs-btn-third-icon-left class to the button to generate the correct behaviour upon hover:

Tertiary negative with left icon


Disabled button

Accessibility

Add the following attributes to help the screen reader:

  • aria-disabled = "true" tabindex = "-1" if you're using <a>
  • disabled if you're using <button>

Disabled negative


Waiting button

Waiting negative


Active button

There is no difference between the positive and negative versions of the active button.


Button with icon

Negative primary and secondary buttons with icon


Previous/Next buttons

Same logic for rounded corner is used as the primary & secondary buttons usage.

Accessibility

aria-hidden="true" is added to icon <i> for screen readers to ignore it because its purpose is simply decorative.

Negative Previous/Next buttons


Open in new window

Accessibility
  • An icon is added to the button to inform that a new window will be opened.
  • title="New window" attribute is added to icon <i> to display browser tooltip indicating link New window.
  • <span class="show-for-sr">New window</span> is added inside the icon <i> for screen readers to read this text indicating link New window.
  • The copy has to be translate by language:
    EN: New window
    FR: Nouvelle fenêtre
    NL: Nieuw venster

Negative button with target="_blank"


Button with link style

Sometimes you may need a button instead of an ancre, for exemple to open a dialog or whatever. If you need a button with a link appearance, put rs-btn-no-style instead of rs-btn with rs-link to have the focus/hover effect of a link.


Button used with <button>

Razor

All above buttons can be used with <button>, by passing value true to the 7th @rsButton parameter "Boolean is button".

There are 3 @rsButton as well for specific <button> described below.