@licuido-ui/ui_label NPM

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 akila@crayond.co

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

alt text

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.

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/ui_filter @licuido-ui/react

0.0.2

8 months ago