FLIN App

Default Group

Basic badge group with default styling for skill tags.

FrontendBackendDevOps

Mixed Types

Badges with different status types grouped together.

ActivePendingCriticalNewProDraft

Tech Stack

Technology stack labels for a project listing or portfolio card.

RustFLINSQLiteWebDevFree to Use

Permission Badges

Role and permission indicators for user access management.

AdminVerifiedContributor

PR Labels

Pull request labels similar to GitHub-style issue tagging.

ApprovedEnhancementDocumentationBreaking Change

In Card Context

Badge group inside a user profile card with avatar.

Juste A.

AdminVerifiedContributor

Usage

<BadgeGroup> <Badge>Frontend</Badge> <Badge>Backend</Badge> <Badge>DevOps</Badge></BadgeGroup><BadgeGroup> <Badge type="success">Active</Badge> <Badge type="warning">Pending</Badge> <Badge type="error">Critical</Badge></BadgeGroup>

Props

Prop	Type	Default	Description
`children`	content	-	Badge components to group together

BadgeGroup

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

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

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

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

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

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } In Card 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