ODS > Component > Buttons

[paulinea]

Buttons

Requirement

As a developer
I want to insert buttons
So That I will get this ready to use component compatible with Orange design specifications and a11y requirements

DSM reference

General description

Component

For the component description please refer to the DSM updates

App Page

the page will propose to the user to describe the component and allow to see the implementation in action.

UI specifications

Anatomy

Component

For the component description please refer to the DSM updates

App Page

• title: "Buttons"
• image: xxx.jpg
• Text: intro text in the DSM
• Core field: The examples of the variants will be shown in the page

Variants

• Text Buttons
• Icon Buttons
• Outlined Buttons
• Contained
• Toggle Buttons

States

• the various available states will be actionable by the user

Internationalization

• NA

UX specifications

Interaction

• All:
  • The user is able to select a text using the default OS behavior
• Touch:
  • Nothing Specific
• Keyboard:
  • Nothing specific

Animations

• default OS animation

Accessibility

Visual Accessibility

• taken into account within the design creation process

Usage Accessibility

• (?) Focus order - NA
• (?) Focus loss expected behavior - NA
• (?) Screen Reader - default OS behavior

Technical specifications

Implementation tasks

• ODS-Component - Buttons - Outlined Contained #99
• ODS-Component - Buttons - Text & Icon #100
• ODS-Component - Buttons - Toggle #116