🚧

This is a valid variant provided in Storybook. The design system team is not able to provide correct spec guidance on the usage of this specific example.

If you are using this specific component configuration, please get in contact with the design system team to share your scenario and use case to allow the team to know the context of usage and allow the team to have a practical approach in reviewing the component configuration.

Overview

The "Filled Icon" Button variant combines the minimalist appeal of the Icon Variant with the primary means of interaction of the Filled Variant. This variant is designed for situations requiring a non-textual, direct action cue that is not as visually dominant as a filled button but more defined than a simple icon.

This variant is particularly useful for interfaces that benefit from the clarity of an icon to represent an action but need to maintain a hierarchy where this action is the focal point. The dark background behind the icon provides a balanced level of emphasis, making it suitable for primary actions or functions within an application.

Usage Guidelines

Use this variant to emphasize key actions that are essential for supporting the workflow, but are not necessarily the primary or concluding action.

The visual styling generates visual prominence by placing a white icon on a solid dark background. However, it's smaller size keeps it from competing with the primary action. It is useful when more than one action needs to fit within a small amount of space, such as Toolbars, Page Headers and Navigations.

This variant can be a powerful tool for guiding user behavior and should be used strategically to maintain the interface's overall balance and prevent visual overload.

---

Design

Filled Icon Button has a square container design with a background fill, border radius, and displays an icon.

Box Model

Filled Icon Button Box Model is designed with specific features to ensure that it meets its core objectives as a container for structured, visually appealing content within a user interface. In order to accomplish this, Button includes two region types.

Dictated Regions (Always required)

• Content (can have an icon)
• Container (background fill and border)

This variant uses all the visual styles from the Standard Filled Button, and may also include any of the following according to the use case and requirements.

Design Notes

• Icon: "Small" Square Variant: Neutral-000
  Uses the standard neutral design system color and visual styling that has forced styling and alignment. It has a center aligned placement inside of the square container area.
• Height and Width: 28px
• Alignment: content centered inside the box

Responsive Layout

This variant uses all the responsive behavior from the Standard Filled Button, and may also include any of the following according to the use case and requirements.

• The "Icon Filled" variant adheres to consistent layout principles regarding spacing, alignment, and responsiveness, similar to other button variants. The key distinction is its automatic adjustment of internal spacing to maintain the icon's centered position within the button, ensuring consistent visual alignment across different states and screen sizes.

For Resize and Reflow behavior, see Examples

States

This variant uses all the interaction state visual styles from the Standard Filled Button, and may also include any of the following according to the use case and requirements.

Use Cases

Examples

🚧

This is a valid variant provided in Storybook. The design system team is not able to provide correct spec guidance on the usage of this specific example.

If you are using this specific component configuration, please get in contact with the design system team to share your scenario and use case to allow the team to know the context of usage and allow the team to have a practical approach in reviewing the component configuration.

Digital Accessibility

WCAG 2.1 AA compliance emphasizes the need for clearly defined aria-labels to convey the button's function, as the icon alone may not be universally understood by all users, especially those using assistive technologies.

The visual presentation should ensure sufficient contrast between the icon and its background, facilitating easy recognition and interaction by users with visual impairments.

This section expands what's covered within the standard variation documentation.

---

Usage Warnings

🚧

Pitfalls & Misconceptions

Filled Icon Button variant does not include a text label, and must align with the following rule:

Any component that contains only images or graphics must also be accompanied by a separate aria-label, which is announced by assistive technologies to users with visual impairments. The aria-label aligns with requirements from the basic [WCAG principles](https://www.w3.org/WAI/fundamentals/accessibility-principles/.

Icon buttons - Mandatory Aria-Label: Button that contains strictly graphic must always be accompanied by a separate aria-label due to its non-textual, image-based visual label. Failure to provide a dedicated aria-label results in screen readers not announcing anything, significantly impairing accessibility.

Icon Clarity and Consistency: The icon should unambiguously indicate the action it represents. Consistency in the usage of icons across the application is crucial to ensure clarity and prevent user confusion. This responsibility falls on the application to enforce such consistency.

---

Alternate Components

• Combo Box Use when there are many states or selectable items and one or more can be selected. This component is best used when space is at a premium and essential content requires progressive disclosure.

---

Reference

• View Code on Storybook
• View Button Specs