History

Aleksandr Lushkin 5592ffbede Client: Login: DocEditor Remove increasing value for RTL		2024-04-17 10:55:33 +02:00
..
badge.stories.tsx	Replaced copyright start year + format	2024-03-21 18:09:55 +04:00
Badge.styled.ts	Client: Login: DocEditor Remove increasing value for RTL	2024-04-17 10:55:33 +02:00
badge.test.tsx	Replaced copyright start year + format	2024-03-21 18:09:55 +04:00
Badge.theme.tsx	Replaced copyright start year + format	2024-03-21 18:09:55 +04:00
Badge.tsx	Replaced copyright start year + format	2024-03-21 18:09:55 +04:00
Badge.types.ts	Replaced copyright start year + format	2024-03-21 18:09:55 +04:00
index.tsx	Replaced copyright start year + format	2024-03-21 18:09:55 +04:00
README.md	Client: fix wrong import - export for shared components	2024-01-10 11:01:43 +03:00

README.md

Badge

Used for buttons, numbers or status markers next to icons.

Usage

import { Badge } from "@docspace/shared/components/badge";

<Badge
  label="10"
  backgroundColor="#ED7309"
  color="#FFFFFF"
  fontSize="11px"
  fontWeight={800}
  borderRadius="11px"
  padding="0 5px"
  maxWidth="50px"
  onClick={() => {}}
/>

Properties

Props	Type	Required	Values	Default	Description
`backgroundColor`	`string`	-	-	`#ED7309`	CSS background-color
`borderRadius`	`string`	-	-	`11px`	CSS border-radius
`className`	`string`	-	-	-	Accepts class
`color`	`string`	-	-	`#FFFFFF`	CSS color
`fontSize`	`string`	-	-	`11px`	CSS font-size
`fontWeight`	`number`	-	-	`800`	CSS font-weight
`id`	`string`	-	-	-	Accepts id
`maxWidth`	`string`	-	-	`50px`	CSS max-width
`label`	`string`	-	-	`0`	Value
`onClick`	`func`	-	-	-	onClick event
`padding`	`string`	-	-	`0 5px`	CSS padding
`style`	`obj`, `array`	-	-	-	Accepts css style