Overview
Source: ./src/documentation/getting-started/about-components.mdx
About components
This page explains how to work with OTTO Components in your projects.
Skip to:
Web components
The OTTO Design System components are built as Web Components, ensuring broad compatibility with any JavaScript library or framework. Web components encapsulate complex interfaces with structure, styling, and functionality to facilitate user interactions.
Refer to the Core principles in the Introduction for more details about the framework-agnostic approach.
Characteristics:
- Custom elements with encapsulated HTML and styles
- Interactive and support advanced functionality
- Slot-based architecture for flexible content integration
- Framework-agnostic and compatible with any JavaScript library
Example:
<oc-banner-v1 type="info" size="100">This is a banner example</oc-banner-v1>
CSS-only components (deprecated)
CSS-only components are native HTML elements with CSS classes for styling. These components have been deprecated in favor of web component replacements. They remain available for legacy support but are not recommended for new implementations.
Naming and versioning
All components follow the same naming scheme:
- Prefix:
oc, short for OTTO Components - Namespace: represents the name of the component
- Version: represents the major version of the component
Example: <oc-namespace-v1></oc-namespace-v1>
Components are versioned via the tag name. The version number is mandatory and indicates the major version.
Working with components
You can customize and interact with components through attributes, slots, and events.
Configuration
Configure components by setting attributes and passing custom content via slots, eliminating the need for CSS class management.
Attributes
Attributes allow you to choose from a set of pre-defined options:
- Enabling or disabling certain features (for example, show or hide icon)
- Choosing type variants (for example, primary or secondary)
- Setting simple values (for example, label or headline)
Slots
Slots allow you to pass custom HTML content to a component when the configuration options are not sufficient. Use slots for custom control elements, structured content, or interactive elements.
Refer to the Working with slots documentation for detailed examples on how to use default slots, named slots, and how to style slot content.
Events
Components provide both generic and custom events for interaction handling.
The generic oc-property-change event fires whenever a property value changes.
Custom events have the prefix oc- to avoid conflicts.
Refer to the Events documentation for more details.