Customizing Nova Components

Nova provides designers with powerful tools to effectively structure and customize components within the Nova Tycho Design System. To facilitate this, Nova distinguishes between two primary approaches: Configuration and Composition.

 

1. Configuration

Configuration involves customizing components through their predefined API. This method enables you to adjust the component's appearance, behavior, and properties without altering its fundamental structure. Configuration is straightforward, quick, and ideal for basic modifications.

Common configuration properties include:

1. Variant Properties: Switch between predefined visual variations (e.g., size, color themes).
2. Boolean Properties: Toggle component features or states (e.g., enabled/disabled, visible/hidden).
3. Text Properties: Customize labels, placeholders, or other textual elements directly.

 

2. Composition

Composition enables deeper customization by inserting or swapping components within designated placeholders known as slots. This method provides extensive flexibility, allowing designers to adapt the structure of components to their unique design requirements.

Composition typically involves:

1. Instance Swap (Slot): Replace predefined placeholders with custom or <partial> components.
2. Nested Slot Properties: Further customize components inserted into slots, enabling intricate and precise adaptations.

 

Terminology

To ensure clarity and consistency, Nova Tycho adopts the following standardized terminology:

• [Template]
  A high-level component designed for detachment and recomposition with custom partial components to meet specific design goals.
• <Partial>
  Reusable, independent building blocks used within templates. Partials can be freely added or replaced to adjust the component's final structure.
• _slot
  A hidden placeholder intended for content injection, enabling extensive customization by inserting custom or partial components.
• ♢ Custom component
  Custom components are created when specific design or functional needs are not addressed by the components available in the Nova component library. These components are developed using Nova tokens and guidelines to maintain consistency and alignment with the design system.

 

By clearly distinguishing these methods and terminology, designers can efficiently leverage Nova components to build consistent, tailored user experiences.