- Getting Started
- Introduction
- Installation
- Implementation
- Principles
- Templates
- Colors
- Icons
- Components
- Badge
- Breadcrumbs
- Button
- ButtonGroup
- Callout
- Card
- CheckBox
- Chips
- Counter
- DatePicker
- DateRangePicker
- Dialog
- Divider
- Drawer
- Dropdown
- Hamburger
- Input Default
- Input Search
- Menu
- Navbar
- Progress Bar
- Radio Button
- Slider
- Spinner
- Switch
- Table
- Tab Default
- Tab Segmented
- TimePicker
- Toaster
- Tooltip
- Tree
- Typography
- WebApp demo
- Home
- Dashboard
- Data grid
- Profile
- Inputs
Badge
Notification badge conveys summary or status information specific to your app
New9
Overview
API
Code
Component 'Badge'
First, you need to import a component to your code (сheck component path is right):
import Badge from "../../core/Badge";
To use the component, copy and paste an example from the CODE tab.
Default props of component can be omitted, they are applied automatically. For example, you can skip the prop type='def', because 'def' is the default value of prop 'type'.
viewstring = filled
This prop set the view of the component. Possible states: filled | smooth | outlined . The default state is filled.
colorstring = default
This prop set the color of the component. Possible states: default | primary | warning | danger | success | primary_alt | warning_alt | danger_alt | success_alt . The default state is default.
classNamestring
A space-delimited list of class names to pass along to a child element.
valuestring
Badge value. Haven't default state.
denseboolean = false
Whether this badge should use minimal styles.
hideboolean = false
If set to true, the badge will be hidden. The default state is false
dotboolean = false
If set to true, the badge form will be "dot". The default state is false
leftboolean = false
If set to true, the badge position will be "left". The default position of badge is on the right. The default state is false
bottomboolean = false
If set to true, the badge position will be "bottom". The default position of badge is on the top. The default state is false
< Badge
view = 'filled'
value = "New"
hide = { false }
dot = { false }
dense = { false }
left = { false }
bottom = { false }
>
< Button text="Button" view="outlined" />
< / Badge >
Setproduct Design System
for Figma & React