Sobeys Logo

Component Explanation: Tag Button

This Tag component is a reusable, styled button-like badge built with React, TypeScript, Tailwind CSS, and the class-variance-authority (CVA) library for managing variants. It also supports optional icons, using either a React Node or a URL string (rendered with Next.js Image).

Key Features

  • Flexible — works as a badge, button, or status chip.
  • Extendable — easily supports more variants and behaviors.
  • Accessible — it's a button by default with customizable props.
  • Icon-Ready — supports both SVG string paths and React components.

Tag Component Examples