Skip to content

Conversation

chavarria-je
Copy link
Collaborator

Description
Introducing the reusable PillTag component — a sleek, accessible, and Figma-aligned pill/chip UI element.
This PR also establishes the necessary global tokens (colors, typography, and border radii) to ensure design consistency across the project.
image

image

Includes

  • Global Tokens (src/globals/)
    • colors.ts
    • typography.ts
    • radii.ts
    • index.ts
  • PillTag Component (src/components/PillTag/)
    • PillTag.tsx
    • PillTag.types.ts
    • PillTag.constants.ts
    • PillTag.styles.ts
    • PillTag.test.tsx (Vitest)
    • PillTag.stories.tsx (Storybook)
    • PillTag.docs.mdx

Motivation
Provide a highly reusable and accessible component for displaying labels or categories.
Built with global design tokens to maintain pixel-perfect consistency with Figma and the project’s design system.

@chavarria-je chavarria-je linked an issue Oct 10, 2025 that may be closed by this pull request
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[CDD] Create PillTag component
2 participants