Skip to main content

Nested Overrides

Nested component overrides allow designers to adjust specific aspects of nested elements within components.

Overview

Nested component overrides offer designers the flexibility to adapt components based on specific design needs while maintaining overall system consistency. Overrides ensure that nested elements support their parent components without disrupting the design language.

Illustration of a textured yellow triangle and a pink textured circle in a blue background with a double edged arrow between them.

Types of overrides

Overrides are useful when adjusting nested components to ensure they align with different design contexts while maintaining visual and functional consistency. These overrides typically apply to the following areas:

Variant override

Nested elements can be adjusted to different types, styles or colours to match the context.

Comparison between variant of the avatar component using different colours with either a person icon or AA typography.

Size override

Nested components can be resized to create a clear hierarchy within the component.

Comparison between sizes of the button component.

Alignment override

Vertical alignment can be adjusted to improve layout balance.

Two icons that signify top aligned and center aligned.

Typography styling

Body content styling can be modified to enhance readability.

Letters A, B, and C in low and upper case.

Override summary

Example Component/Element Variant override Size override Alignment override
Visually supportive nested elements
  • Avatar
  • Tag
  • Icon
 Yes No No
Bulk quantity nested components
  • Nested icon button, buttons, link etc in a data table
 Yes No No
Nested actions in full-page overlay components
  • Modal
  • Bottom sheet
  • Date picker
 Yes Yes No
Nested actions in non-full-page overlay components
  • Notification
  • Uploader
 No Yes
Only decrease in size 		No
Nested actions with specific purpose
  • Close button
 No No No
Alignment with leading and trailing content
  • List item
 No No Yes

Variant overrides

Visually supportive nested elements

Within a larger component, nested elements such as tags, avatars and icons often serve as visual support.

Multi line list component with two nested elements; avatar component as leading content and a tag component as trailing content.
Notification component with icon with background as a nested component.

Overrides help in colour and style adjustments to match the parent component's theme and ensuring contrast and readability across different design contexts. Size should remain consistent to maintain visual balance and avoid disrupting the component’s proportions.

Do
Two list item components with leading avatar and trailing tag as supported nested overrides.
Don't
Two list item components with sizes of leading avatar and trailing tag changed, representing unsupported nested overrides.

Nested components can be changed to different variants and styles.

Nested components cannot be increased or decreased in size.

Do
Two notification components in the information variant, each using different leading icons supported nested overrides.
Don't
A notification component in the information variant with the exclamation point icon changed, representing unsupported nested override.

Icons can be changed to a different one as long as it fits the context.

Icons cannot be increased or decreased in size.

Bulk quantity nested components

Components that contain bulk quantity nested components, such as data tables, often include buttons, icons, and other interactive elements. These nested components can be overridden to provide designers with more flexibility while maintaining usability.

A data table with three columns and five rows where each row has a different nested component such as buttons, icons, and other interactive elements that are all supported nested overrides.

Variants can be adjusted to better support the data table’s structure and hierarchy. However, size adjustments are not recommended, as they can disrupt consistency, affect spacing, and impact the overall usability of the table layout.

Do
A data table component with nested components in different variants as an example of supported nested overrides.
Don't
A data table component representing nested components that had the size changed, representing unsupported nested overrides.

Nested components can be adjusted to different variants.

Nested components cannot be increased or decreased in size.

Size and variant overrides

Nested actions in full-page overlay components

Bulk action buttons, such as those in full-page overlays (e.g., modals, bottom sheets, date pickers), may need adjustments to ensure they are usable and consistent across various layouts and screen sizes.

Modal component with two actions buttons as nested overrides.
Bottom sheet component with two actions buttons as nested overrides.
A date picker component highlighting the dates from January 18 2021 to February 5 2021 with two action buttons as nested overrides.

Overrides help in scaling button sizes to fit within bulk action toolbars or containers, ensuring they are proportionate and visually balanced. Style can be adjusted to any variant, as long as it aligns with the visual hierarchy. Ensure primary actions are more prominent than secondary actions.

Do
A modal component with two action buttons with the same size representing supported nested overrides.
Don't
A modal component with two action buttons of different sizes representing unsupported nested overrides.

Nested actions in full-page overlay components can be adjusted to different sizes, but all actions within the same set must maintain a consistent size.

Nested actions cannot have different sizes individually within the same component.

Do
A bottom sheet component with two action buttons in different variants representing supported nested overrides.
Don't
A bottom sheet component with two action buttons in the same variant representing unsupported nested overrides.

Nested actions in full-page overlay components can be adjusted to different variants. However, the primary action must always be more prominent than secondary actions.

Nested actions can't use the same variant for both primary and secondary actions, nor should the primary action be less prominent than the secondary action.

Size overrides only

Nested actions in non-full-page overlay components

Action buttons within non-full-page overlays components (e.g. notifications, uploaders) may need size adjustments to ensure they match the overall layout and user expectations.

A notification component with nested action buttons as nested overrides.
An uploader component with one nested action button as nested override.

Nested actions can be decreased in size to fit the available space and maintain visual balance. However, the variant should remain unchanged to ensure consistency with the overall visual hierarchy.

Do
An uploader component with an action button in a different size but the same variant representing a supported nested override.
Don't
Two uploader components with an action button in a different size and variant, representing an unsupported nested override.

Nested action(s) can be decreased in size.

Nested actions can't be increased in size nor changed to a different variant.

Do
A notification component in the information variant with a primary and ghost button representing supported nested overrides.
Don't
A notification component in the information variant with a secondary and a ghost button, representing unsupported nested override.

Nested bulk actions can be decreased in size.

Nested bulk actions cannot be increased in size nor changed to a different variant.

Alignment overrides

By default, content within components is top-aligned. However, certain nested elements may require vertical alignment adjustments to maintain a proper visual hierarchy and ensure balance within the layout.

A list item component with leading and trailing icons top-aligned.

When necessary, content can be center-aligned, ensuring that all elements—including leading and trailing content—are aligned consistently for a cohesive and well-balanced layout.

Do
A list item component with leading and trailing icons center-aligned, representing supported nested overrides.
Don't
A list item component with the leading icon centre-aligned and the trailing icons top-aligned, representing unsupported nested overrides.

All content within the component should be consistently aligned.

Content within the component should not have mixed alignments.

Restricted overrides

Nested actions with specific purpose

Certain nested actions that serve a specific purpose cannot be overridden. For example, a close button, which is typically a standard icon or action, cannot be overridden in terms of style or size. This ensures functionality is preserved and prevents visual disruption in key interactive elements.

A tooltip component with a close icon button representing a supported nested override.
A toast component with one nested action button representing a supported nested override.
A modal component with a close icon button representing a supported nested override.
A notification component with one nested action button representing a supported nested override.
Don't
A toast and a notification component in the information variant with the close icon button changed to a different variant, representing unsupported nested overrides.

Actions with specific purpose should not be changed to a different variant.

Typography overrides

Typography overrides are useful to tailor text to suit different use cases and visual needs.

Style

Only body text and captions can be styled, e.g. bold or underlined. These changes should be evaluated on a case-by-case basis by the design system team.

Weight

The font weight should remain consistent and cannot be scaled up or down to maintain clarity and visual consistency across all components.

Back to top