Tendoo Design

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 a Tag)
  • 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.