FLIN App

Default

Neutral badge for generic labels and drafts.

DefaultDraftArchived

Success

Positive outcomes and active states.

ActiveVerifiedPaid

Error

Failures, offline states, and critical issues.

OfflineFailedBlocked

Warning

Pending actions and expiring items.

PendingExpiringReview

Info

Informational labels and new items.

NewBetaUpdated

Gold

Premium, admin, and featured labels.

ProAdminFeatured

In Context

Badges work with avatars, cards, and rows to show user roles and statuses.

Juste A.

CEO, ZeroSuite

Admin

Usage

<Badge>Default</Badge><Badge type="success">Active</Badge><Badge type="error">Offline</Badge><Badge type="warning">Pending</Badge><Badge type="info">New</Badge><Badge type="gold">Pro</Badge>

Props

Prop	Type	Default	Description
`type`	text	"default"	Variant: default, success, error, warning, info, gold
`children`	content	-	Badge label text

Badge

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Default

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Success

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Error

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Warning

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Info

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Gold

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } In Context

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Usage

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Props