Badge

macOS 13.3+

Displays a small label for status, category, or count.

import SwiftUIstruct BadgeUsageExample: View {    var body: some View {        HStack(spacing: FLXSpacing.sm) {            FLXBadge("Primary", variant: .primary)            FLXBadge("Secondary", variant: .secondary)            FLXBadge("Destructive", variant: .destructive)            FLXBadge("Outline", variant: .outline)        }        .padding(FLXSpacing.xl)    }}

Installation

Requires the design system foundation (tokens and theme).

pnpm dlx shadcn@latest add https://swiftui.flexnative.com/r/mac-badge.json

Usage

FLXBadge("New", variant: .primary)

Variants

Four variants, set via variant:.

FLXBadge("Primary", variant: .primary)FLXBadge("Secondary", variant: .secondary)FLXBadge("Destructive", variant: .destructive)FLXBadge("Outline", variant: .outline)

Custom styling

FLXBadgeStyle is an FLX protocol. Override it for a subtree via .flxBadgeStyle(_:):

struct FLXAccentBadgeStyle: FLXBadgeStyle {  func makeBody(configuration: Configuration) -> some View {      configuration.text          .flxFont(.caption, weight: .semibold)          .padding(.horizontal, FLXSpacing.sm)          .padding(.vertical, FLXSpacing.xs / 2)          .foregroundStyle(.white)          .background(.green.gradient)          .clipShape(Capsule())  }}HStack(spacing: FLXSpacing.md) {  FLXBadge("New", variant: .primary)  FLXBadge("New", variant: .primary)      .flxBadgeStyle(FLXAccentBadgeStyle())}

API Reference

FLXBadge

init(_ textKey: LocalizedStringKey, variant: FLXBadgeVariant = .primary)init(_ textResource: LocalizedStringResource, variant: FLXBadgeVariant = .primary)init<S: StringProtocol>(_ text: S, variant: FLXBadgeVariant = .primary)

Variants

CaseDescription
primaryFilled with theme.colors.primary.
secondaryFilled with theme.colors.secondary.
destructiveFilled with theme.colors.destructive.
outlineTransparent, bordered.