Buttons

The Platforms Code Design system includes four types of buttons: Standard Buttons, menu buttons, destructive buttons, icon buttons, and close buttons. Standard buttons are used for primary actions, while Destructive buttons are used for significant actions like data deletion, Menu buttons provide multiple options, and close buttons dismiss dialogues or exit functions. This range of buttons caters to a variety of user interactions.

Buttons are available in four variants:

• Standard Button: A standard button is a fundamental user interface element that triggers a single action or event. It's typically used to initiate common and routine actions within an application or a website.
• Destructive Button: Destructive buttons perform irreversible actions, like deleting data or cancelling important processes. To avoid accidental clicks, they need thoughtful use and user confirmation.
• Menu Button: Menu button functions as a toggle to reveal a menu presenting various options.
• Icon Buttons: Every type can take the form of an icon button, where the emphasis is primarily on one visual symbols (icon) to communicate their intended purpose.

Buttons are available in four styles:

Within the Platforms code, buttons are designed to convey three distinct levels of emphasis, each denoting a specific degree of importance. High-emphasis buttons serve a pivotal role by being strategically employed for actions that demand prominence and need to stand out significantly. These high-emphasis buttons are typically reserved for critical calls-to-action (CTAs) and primary actions, ensuring they capture the user's attention effectively. On the other hand, lower-emphasis buttons are designated for actions of reduced importance, often associated with secondary or less critical functions within the interface. This meticulous differentiation in emphasis levels contributes to a well-structured and user-centric design, guiding users through the platform with clarity and precision.

In Platforms Code, buttons convey three levels of emphasis: high, medium, and low. High-emphasis buttons stand out for critical actions like primary calls-to-action (CTAs). Lower-emphasis buttons are for less crucial functions. This differentiation ensures clarity and precision in user interaction.

Buttons in the Platforms Code exhibit various behaviors depending on user interaction. The states of button behaviors are:

• Default: The default state of a button when it is not being interacted with. It appears as a standard, clickable button.
• Hovered: Occurs when the user moves the cursor over the button without clicking.
• Pressed: This state is triggered when the user clicks or taps the button. It provides feedback that the button has been successfully activated.
• Selected: Applicable in scenarios where buttons can be toggled on and off. Indicates that the button is currently selected or activated.
• Disabled: The disabled state of a button is a condition where the button is not clickable or interactive. This state is often used in user interfaces to communicate that the button cannot be activated under the current circumstances.

Icons in Platforms Code the icon can be a leading icon or trailing icon. A trailing icon follows the button label, while a leading icon precedes it. Both types serve similar purposes, offering visual cues and enhancing the user interface. However, their use varies based on content flow, level of emphasis or interface directionality.

The leading icon often draws attention first, followed by the button text. This can be useful when you want to emphasize a specific action or feature.

Trailing icons work best as a complement to the button label, especially when they serve a supplementary or visual role rather than a primary functional indicator. This approach is suitable when the emphasis is on the text, making it common in situations where the text provides a clear description of the button's purpose.

• Container: The clickable area that holds all the elements.
• Button Label: Displays the title of the button.
• Loading or trailing Icon: Provides visual representation of the button's purpose or name.

Button serve as an essential tool for providing contextual information and aiding workflows, particularly for users with disabilities. It is crucial to ensure that these modal are accessible, allowing all users to perceive, understand, operate, and interact with them effectively.

• Always use the <button> HTML element for buttons. This ensures that the button is accessible by default, as it supports keyboard focus and the disabled attribute natively.
• Non-semantic HTML like <div> should not be used for actions. If you must use an for a button, ensure it performs navigation. Always provide a valid href attribute.
• Critical and Warning Notifications: Use role="alert" for immediate announcement by assistive technologies.
• Other Notifications: Apply role="status" for announcements that are important but less urgent.
• Equip all notifications with an aria-live attribute to announce content updates via assistive technologies. Use stopAnnouncements prop to manage these announcements.
• Use aria-describedby to clarify the purpose of notifications when announced or focused. Utilize the title content or the entire notification content for this attribute, depending on the presence of a title.
• Provide visual feedback for different states such as hover, focus, and active. This helps users understand that the button is interactive and can be clicked.
• Ensure text or icons on the button have a contrast ratio of at least 4.5:1 against the button background to comply with WCAG AA standards.
• Ensure buttons are large enough to easily interact with, especially for users with motor impairments. A recommended minimum touch target size is 44x44 pixels.
• Use aria-label when the button does not contain text that describes its function, especially for icon buttons.<button aria-label="Close"><img src="icon.svg" alt=""></button>
• Ensure that buttons can receive focus. The default <button> tag is focusable, but if you're using other elements (which should be avoided for actions), set tabindex="0".