Component usage basics
Learn how to use Tendoo Design System components consistently and effectively across projects.
Component Usage Basics
This page provides foundational guidance on how to use components from the Tendoo Design System. Whether you're a designer or developer, following these guidelines ensures consistent, accessible, and maintainable interfaces.
When to Use a Component
Before building a new UI element, ask:
- Does this component already exist in the system?
- Can I achieve this with a variation or combination of existing components?
- Is this pattern already approved in the design system?
General Guidelines
1. Use Components as Designed
Do not alter core behavior, structure, or styles unless customization is explicitly supported.
2. Respect Naming Conventions
Use component names and variants consistently across design files and code.
3. Follow Accessibility Practices
- Use semantic HTML or equivalent ARIA roles.
- Ensure all interactive components support keyboard navigation.
- Apply proper contrast and focus indicators.
4. Avoid Custom Styling
Resist overriding core tokens (spacing, color, typography) unless it's part of an approved theme or extension.
5. Reference Documentation
Each component includes usage, props, states, and dos/don’ts. Always check documentation before implementing or modifying.
Component States
Understand and implement all relevant states:
- Default
- Hover / Focus
- Active / Pressed
- Disabled
- Loading
Common Usage Mistakes
- Misusing a component outside its intended purpose (e.g., using
Badge
as aTag
) - Skipping required props or accessibility labels
- Using outdated or deprecated components
Design-to-Dev Handoff
- Designers: Use official Figma components and annotate key behaviors.
- Developers: Reference the live documentation and code examples.
When to Propose a New Component
If no current component or pattern solves your use case, propose a new one following the Contribution Guidelines.
Using components correctly helps maintain a unified experience across Tendoo’s platforms and minimizes inconsistency, rework, and accessibility issues.