Last updated
Was this helpful?
Avonni Dynamic Components offer extensive styling options, allowing you to customize the appearance of your components to match your brand and create a polished user experience. The Style Panel is your central hub for managing these styles.
Every Avonni component has a set of default styles defining its basic appearance. You can customize these styles in two ways:
Component-Specific Styling (Default Style Selector): Modify the styles of a single, specific component instance. These changes will only affect that one component.
Reusable Custom Styles: Create named custom style selectors that define a set of style attributes. You can then apply these custom styles to multiple components, ensuring consistency and making it easy to update styles globally.
The Style tab is on the right side of the Component Builder when you select an Avonni Component. It contains:
Style Attributes: A list of attributes you can customize to change the component's appearance (e.g., colors, fonts, spacing).
Style Selector: A menu where you can create and apply custom CSS classes to the component.
When adding a component to the canvas, it uses the "Default" style. If you modify style attributes (e.g., color, font size, padding) while the "Default" style is selected, those changes will only affect that specific instance of the component.
You add a Button component.
You select the Button component.
You see "Default" is selected in the Style Panel.
You change the Button's background color to red in the Properties Panel.
Only that specific Button will have a red background. Other Button components will retain their default appearance.
This is useful for one-off customizations.
To create reusable styles that you can apply to multiple components:
Select a Component: Select any component on the canvas. It doesn't matter which component you select initially.
Open the Style Panel: Go to the Style Panel.
To create a new style
Go to the Style Selector: This is in the Style tab of the Component Builder.
Name your style: Give it a clear name that describes its purpose (e.g., RedMetric, PrimaryButton).
Create the style: Click the + Create "[styleName]" button to generate the custom CSS class.
Customize the Style Attributes
With your new custom style selected (highlighted) in the Style Panel, use the Properties Panel to modify the style attributes of the currently selected component. For example, you might change the background color, font size, border, padding, etc.
Important: The changes you make here are saved to the custom style, not just to the individual component you initially selected.
Apply the Style to Other Components
Select another component on the canvas (of the same type as the component you used to create the style – you can apply a Button style to another Button, but not to a Data Table).
In the Style Panel, you'll see your custom style listed.
Click on the Style attribute in the Properties Panel
Select your custom style to apply it to the selected component.
See applied Styles
You can also visualize components that uses styles from the Style Panel directly.
Now, all components you've applied that custom style will share the same appearance. If you edit the custom style later, all components using that style will automatically update.
Add a Metric component to your canvas.
Open the Style Panel.
Click the "+" (or "New Style") button to create a new style.
Name the style RedMetric.
With the RedMetric style selected in the Style Panel, select the Metric component.
Change the Metric component Background color to red (using the Properties Panel).
Add another Metric component to your Canvas.
Click on this component, then select the Style Attribute.
Select your custom RedMetric style.
Now, both Metric components will have a red background. If you later change the background color defined in the RedMetric style (in the Style Panel), both Metric components will update automatically.
Style Scope: Currently, custom styles are scoped to the individual Dynamic Component where they are created. They are not shared between different Dynamic Components. However, we plan to introduce cross-component style sharing in an upcoming release.
Component Type Compatibility: You can only apply a custom style to components of the same type as the component you used to create the style. You can't apply a Button style to a Data Table.
Overriding Styles: You can override a custom style on a specific component by making further changes while selecting the "Default" style. This creates a component-specific override.
Deleting Styles: You can delete custom styles in the Style Panel. Be careful, as this will affect all components using that style.
Style Naming: Use a straightforward naming convention to organize your custom styles so they are easily recognized.
Custom styles in Avonni Components can be easily added and applied to other component of the same type. You can also easily visualize component that uses your Styles
