Live Storybook
Pick a color mode
Light
Dark
System
Pick a theme
Default
Colorful
Components
Badge
Quick search...
⌘K
Storybook
Welcome Page
Components
Badge
Block and slots
Buttons
Form
Live
Templates
Examples
Styleguide
- 0.7.1
Welcome Page
Welcome Page
Badge
Components
Badge
List
Components
Block and slots
List
Table
Components
Block and slots
Table
Button
Components
Buttons
Button
Button Iframe
Components
Buttons
Button Iframe
Dropdown
Components
Buttons
Dropdown
Text Input
Components
Form
Text Input
Live Button
Components
Live
Live Button
Live Button Iframe
Components
Live
Live Button Iframe
Modal
Components
Templates
Modal
Slide-over
Components
Templates
Slide-over
Set assigns
Components
Templates
Set assigns
Forms
Examples
Forms
Colors
Styleguide
Colors
Typography
Styleguide
Typography
Badge
Stories
Playground
Source
Stories
Playground
Source
Just a badge component, with colors.
Preview
Code
Default badge
Attributes
Event logs
Attribute
Type
Documentation
Default
Value
id
:string
Required
text
*
:string
Badge label
theme
:atom
Component library theme
:default
color
:atom
One color among a small set.
:default
default
info
primary
success
warning
danger
hex_color
:string
Custom HEX color. Overrides :color attribute.
small
:boolean
When true, renders a smaller badge.
false
icon
:string
Prepends an icon to the badge. Use it with FontAwesome classes.
rest
:global
Any HTML attribute.
Open a variation
Default badge
With predefined colors
With predefined colors, but small
With custom colors
With FontAwesome icons
With FontAwesome icons, but small