Skip to main content

Style Customization

Overview​

Every Abyss component supports style customization using class names. Customization should be kept at a minimum, as the Abyss components are set to create a standard across all UHG affiliated products.

Prop Overrides​

To apply your styles to any component, go to the Integration tab under component documentation and find the classes table. The class name column will tell you how to target specific elements in any component.

Button Example​

Here you have a default Button component.


Similarly, to customize Button component, you can target specific class names to change the styles. The Button component should maintain a 3:1 color contrast ratio. Please visit the accessibility documentation page to read more on designing an accessible component.

// Add styles to Button
<Button
  styles={{
    'abyss-button-root': {
      backgroundColor: '#d9f6fa',
    },
    'abyss-button-label': {
      color: '#002677',
    },
  }}
/>

States​

Components that allow for additional customization depending on their state can be configured by passing the desired style to the Abyss class using the &:state selector. Available states will be displayed on the integration tab.

Table of Contents