Badge

A badge useful for displaying a small amount of information.

Badge

variant

radius

color

size

contrast

text

--- 
import { Badge } from 'fulldev-ui'
---

<Badge
  variant="outline"
  radius="auto"
  color="base"
  size="md"
  contrast={true}
  text="Badge"
/>

Props

Prop	Type	Default
variant	solid \| surface \| soft \| outline \| ghost	outline
radius	none \| auto \| full	auto
color	base \| brand	-
size	sm \| md \| lg	-
contrast	boolean	-
icon	Icon['name']	-
text	string	-
html	string	-
as	HTMLTag	div
HTML Attributes	Polymorphic<as>	-

Examples

`icon`

Either an icon object or a string representing the icon name.

Badge

---
import { Badge } from 'fulldev-ui'
---

<Badge icon="circle" text="Badge" />
<Badge text="Badge" icon="circle" />

`size`

The size prop cascades: it is inherited from the parent and it is applied to all children.

Badge

---
import { Badge } from 'fulldev-ui'
---

<Badge size="sm">Badge</Badge>
<Badge size="md">Badge</Badge>
<Badge size="lg">Badge</Badge>

`compact`

The compact prop changes the underlying values used by the size prop. Just like the size prop it cascades, which means it is inherited from the parent and it is applied to all children.

With the compact prop you are able to use the same component in different contexts, like in a large hero or a small card. It will automatically adapt.

Badge

---
import { Badge } from 'fulldev-ui'
---

<Badge compact size="sm">Badge</Badge>
<Badge compact size="md">Badge</Badge>
<Badge compact size="lg">Badge</Badge>

`variant`

Sets the color variant used for this component and all its children.

Badge

---
import { Badge } from 'fulldev-ui'
---

<Badge variant="solid">Badge</Badge>
<Badge variant="surface">Badge</Badge>
<Badge variant="soft">Badge</Badge>
<Badge variant="outline">Badge</Badge>
<Badge variant="ghost">Badge</Badge>