Label

The Label component is a customizable label element designed to display text or a React element with a colored background. It provides options to set the text color, background color, and a click event handler for interactivity.

Author

• @author Akila Kalaiyarasan [email protected]

Link

Story Book Link ButtonGroup

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_label

Import component

import { Label } from '@licuido-ui/ui_label';

Usage

<Label  color={'#fff'}  />

Image

Sample code

<Label 
  id={'label'}
  color='#fff' 
  bgColor='#007bff' 
  label='Click Me' 
  onClickFun={() => console.log('Label clicked')} 
/>

Props

| Name | Type | Default Value | Description | | -------------- | ---------------------- | ------------- | ----------------------------------------------------------- | | id | string | string | string | | className | string | '' | Additional CSS class for styling the label component. | | sx | SxProps | {} | Custom style prop for using MUI's sx prop. | | color | string | '#e2eafa' | Color of the label text. | | bgColor | string | '#7692cc' | Background color of the label. | | label | string | ReactElement | '' | The text or React element to be displayed within the label. | | onClickFun | () => void | () => false | Event handler for when the label is clicked. |