Please don't forget to read Usage part of each element.
States
States are visual representations used to communicate the status of a component or interactive element.
Types
States communicate the status of the components to the user. States must have clear affordances distinguishing them from one other and the surrounding UI, emphasized according to their priority levels.

-
Enabled / Default state
State visible when a component is interactive. -
Hover state
State visible when a user has placed a cursor above an interactive component. Cursor becomes a pointer. -
Focused state
State visible when a user has highlighted an interactive component, using an input method such as a keyboard or voice. -
Disabled state
State visible when a component is noninteractive. This state is applied to a component when the user is not allowed to interact with it due to either permissions, dependencies, or pre-requisites. Disabled states completely remove the interactive function of a component. -
Selected state
State visible when a user make a choice.
Enabled/default state
The enabled state is the default state of a component/element, it's what the user see before any interaction. To follow the Proximus brand, major part of a components are purple and grey colors based.

Hover state
A hover state communicates when a component or element is interactive, and should be emphasized in a UI. This state is initiated by the user using a cursor over an interactive component.

-
Default hover
The default hover gives a clear affordances distinguishing this state from the enabled one and the surrounding UI. -
Light hover
The light hover is a semi-transparent covering on an component that indicates its state. Light hover state provides a way to highlight the components on hover without too much emphasis. An overlay can be applied to an entire component. We are using this type of hover state for lists. This hover effect is used for list components such as drag and drop, action menu,...
Focused state
A focused state communicates when a user has highlighted an element using a keyboard or voice. Focus states apply to all interactive components.
Each browser has a different default focus state style that we customized to match the UI of Proximus interfaces. The focused state is visualy the same than the hover state.

To be accessible, all interactive components on a page need a focus state, not just buttons or links. A focus state highlights interactive components, and is crucial for wayfinding when using a keyboard to navigate. Focus state users may be someone using a screen reader, a person with limited mobility, or a power user that utilizes the keyboard for faster navigation.
Focused state combined with selected state
Focused state can be combined with selected state and remain strighly visible. When a element is on selected state, the outline is placed outside to be still visible.

- Focused state
- Selected state
- Selected + focused states
Disabled state
A disabled state communicates when a component or element isn’t interactive, and should be deemphasized in a UI.

Best practices
- Disabled components can be hovered over, but won’t display state changes to the component or cursor.
- Disabled components don’t change state when tapped.
Selected state
A selected state indicates user selection of options. This state should receive medium emphasis so they are easily identifiable, but not distracting.

Selected state with positive emphasis
For some components, the selected state is using green color to emphase a positive and success message.

Sizes and colors
Disabled
For Screen Reader add:
-
aria-disabled="true"
to <a> -
disabled
to <button>
rs-txt-disabled
rs-bg-disabled
Negative disabled
rs-txt-disabled-neg
rs-bg-disabled-neg
Hover
rs-txt-hover
rs-bg-hover
rs-bg-hover-second
Negative hover
rs-txt-hover-neg
rs-bg-hover-neg
rs-bg-hover-second-neg
Selected
Don't forget to put aria-selected="true"
to indicate the current state of interactive element. You could find more info about aria-selected on W3C website.
rs-txt-selected
rs-element-selected
Negative selected
rs-element-selected-neg
Focused
rs-txt-focus
rs-bg-focus
Clickable
rs-bg-clickable
Negative cliquable
rs-bg-clickable-neg