History

Alexey Safronov 3987fc0eeb Fixed paths		2023-11-10 11:20:02 +04:00
..
badge.stories.js	figma links were added	2023-07-03 13:31:26 +05:00
badge.test.js	Web: Moved all clients app to packages directory	2022-07-22 22:01:25 +03:00
index.js	Fixed paths	2023-11-10 11:20:02 +04:00
README.md	Web: Moved all clients app to packages directory	2022-07-22 22:01:25 +03:00
styled-badge.js	Web: Components: Increase font in Components when rtl	2023-11-09 17:43:16 +01:00

README.md

Badge

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

Usage

import Badge from "@docspace/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