Chip Component

The <Chip> component is designed to render customizable chip elements, typically used for displaying tags, categories, or small pieces of information.

Basic Usage

The component renders a chip with text and customizable styling.

Basic

import { Chip } from "react-better-html";

function App() {
   return (
      <Chip text="Category" />
   );
}

Circle

import { Chip } from "react-better-html";

function App() {
   return (
      <Chip text="Category" isCircle />
   );
}

Custom

import { Chip } from "react-better-html";

function App() {
   return (
      <Chip text="Category" fontWeight={700} color="#ffffff" backgroundColor="#ff0000" />
   );
}

Subcomponents

A number of components in the library have a subcomponent feature witch is like a preset of the same component that is frequently used.

Chip.colored

This component renders with a border and a background color.

import { Chip } from "react-better-html";

function App() {
   return <Chip.colored text="Colored Text" color="#ff0000" />;
}