Fulldev UI

Docs Components Blocks Showcase

Badge

Badge
---
import Badge from 'fulldev-ui/components/Badge.astro'
---

<Badge>Badge</Badge>

Props

PropTypeDefault
radius'none' | 'auto' | 'full'full
size'sm' | 'md' | 'lg'-
color'base' | 'brand'-
contrastboolean-
htmlstring-
textstring-
iconstring-
asHTMLTaghref ? a
HTML AttributesPolymorphic<href ? a>-

Examples

Badge
Badge
Badge
---
import Badge from 'fulldev-ui/components/Badge.astro'
---

<Badge size="sm">Badge</Badge>
<Badge size="md">Badge</Badge>
<Badge size="lg">Badge</Badge>
Badge
Badge
---
import Badge from 'fulldev-ui/components/Badge.astro'
---

<Badge color="base">Badge</Badge>
<Badge color="brand">Badge</Badge>
Badge
Badge
---
import Badge from 'fulldev-ui/components/Badge.astro'
---

<Badge>Badge</Badge>
<Badge contrast>Badge</Badge>
Badge
Badge
Badge
---
import Badge from 'fulldev-ui/components/Badge.astro'
---

<Badge radius="none">Badge</Badge>
<Badge radius="auto">Badge</Badge>
<Badge radius="full">Badge</Badge>
Badge
---
import Badge from 'fulldev-ui/components/Badge.astro'
---

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