tuv badges

tuv badges is a strict and customizable badges component for web development projects, designed for simplicity and adherence to strict design guidelines.

Screenshots

Package instalation

Instal package using pnpm

  pnpm add @tuv/badges

Instal package using yarn

  yarn add @tuv/badges

Instal package using npm

  npm i @tuv/badges

Usage/Examples

import React from "react";
import ReactDOM from "react-dom/client";
import {Badges} from "@tuv/badges";

const App = () => (
  <div>
    <Badges variant="success" text="hello" size="md" />
    <Badges variant="danger" text="hello" size="md" />
    <Badges variant="info" text="hello" size="md" />
    <Badges variant="warning" text="hello" size="md" />
    <Badges variant="dark" text="hello" size="md" />
  </div>
);

ReactDOM.createRoot(document.getElementById("app")!).render(<App />);

Props @tuv/badges

Props that you can pass to <Badges {...props} />

| Prop Name | Value | required | | :-------- | :------------------------------------------------- | :------- | | size | "sm" / "md" / "lg" / "xl ' | false | | variant | "success" / "danger" / "info" / "warning" / "dark" | false | | text | string | true | | LeftIcon | React.ComponentType<SVGProps> | false | | RightIcon | React.ComponentType<SVGProps> | false | | border | boolean | false |