Working with Component styles

Component styles enable you to fine-tune the appearance of individual UI elements such as buttons, form controls, and navigation without affecting global theme settings. Use component styles when you need more granular control than what Global styles provide.

The Component styles panel provides control over how specific elements like buttons, inputs, and navigation items look and behave across different states such as hover, focus, and disabled. This panel enables tailoring the look of specific UI elements without affecting the broader theme.

A search and filter bar at the top of the panel lets you narrow down components by name or category.

Each component is represented as a tile and grouped by function, such as Navigation, Messaging, Forms. Selecting a component tile opens a side panel with editable properties for that component and its subcomponents.

Figure 1. Component styles panel

• Preview components
  As you’re creating or managing your theme, you can preview the components available for inclusion on your instance.
• Edit components
  Edit Theme Builder individual components to better suit your brand and to meet accessibility compliance standards. The theme hooks that you can edit are specific to each type of component.