Badge

Badge([text('Badge')])

Badge sizes

Xsmall Small Medium Large Xlarge

Badge([text('Xsmall')], style: [Badge.xs]),
Badge([text('Small')], style: [Badge.sm]),
Badge([text('Medium')], style: [Badge.md]), // Default
Badge([text('Large')], style: [Badge.lg]),
Badge([text('Xlarge')], style: [Badge.xl]),

Badge with colors

Primary Secondary Accent Neutral Info Success Warning Error

Badge([text('Primary')], style: [Badge.primary]),
Badge([text('Secondary')], style: [Badge.secondary]),
Badge([text('Accent')], style: [Badge.accent]),
Badge([text('Neutral')], style: [Badge.neutral]),
Badge([text('Info')], style: [Badge.info]),
Badge([text('Success')], style: [Badge.success]),
Badge([text('Warning')], style: [Badge.warning]),
Badge([text('Error')], style: [Badge.error]),

Badge with soft style

Primary Secondary Accent Info Success Warning Error

Badge([text('Primary')], style: [Badge.soft, Badge.primary]),
Badge([text('Secondary')], style: [Badge.soft, Badge.secondary]),
Badge([text('Accent')], style: [Badge.soft, Badge.accent]),
Badge([text('Info')], style: [Badge.soft, Badge.info]),
Badge([text('Success')], style: [Badge.soft, Badge.success]),
Badge([text('Warning')], style: [Badge.soft, Badge.warning]),
Badge([text('Error')], style: [Badge.soft, Badge.error]),

Badge with outline style

Primary Secondary Accent Info Success Warning Error

Badge([text('Primary')], style: [Badge.outline, Badge.primary]),
Badge([text('Secondary')], style: [Badge.outline, Badge.secondary]),
Badge([text('Accent')], style: [Badge.outline, Badge.accent]),
Badge([text('Info')], style: [Badge.outline, Badge.info]),
Badge([text('Success')], style: [Badge.outline, Badge.success]),
Badge([text('Warning')], style: [Badge.outline, Badge.warning]),
Badge([text('Error')], style: [Badge.outline, Badge.error]),

Badge with dash style

Primary Secondary Accent Info Success Warning Error

Badge([text('Primary')], style: [Badge.dash, Badge.primary]),
Badge([text('Secondary')], style: [Badge.dash, Badge.secondary]),
Badge([text('Accent')], style: [Badge.dash, Badge.accent]),
Badge([text('Info')], style: [Badge.dash, Badge.info]),
Badge([text('Success')], style: [Badge.dash, Badge.success]),
Badge([text('Warning')], style: [Badge.dash, Badge.warning]),
Badge([text('Error')], style: [Badge.dash, Badge.error]),

Neutral badge with outline or dash style

These badges use dark text, only use them on light backgrounds

Outline Dash

// Ensure these are on a light background
Badge([text('Outline')], style: [Badge.neutral, Badge.outline]),
Badge([text('Dash')], style: [Badge.neutral, Badge.dash]),

Badge ghost

ghost

Badge([text('ghost')], style: [Badge.ghost]),

Empty badge

Badge([], style: [Badge.primary, Badge.lg]),
Badge([], style: [Badge.primary, Badge.md]),
Badge([], style: [Badge.primary, Badge.sm]),
Badge([], style: [Badge.primary, Badge.xs]),

Badge with icon

infoInfo check_circleSuccess warningWarning errorError

Badge(
  [
    Icon('info', style: [TextUtil.sm]),
    Text('Info'),
  ],
  style: [Badge.info, Layout.gap1],
),
Badge(
  [
    Icon('check_circle', style: [TextUtil.sm]),
    Text('Success'),
  ],
  style: [Badge.success, Layout.gap1],
),
Badge(
  [
    Icon('warning', style: [TextUtil.sm]),
    Text('Warning'),
  ],
  style: [Badge.warning, Layout.gap1],
),
Badge(
  [
    Icon('error', style: [TextUtil.sm]),
    Text('Error'),
  ],
  style: [Badge.error, Layout.gap1],
),

Badge in a text

Heading 1 Badge

Heading 2 Badge

Heading 3 Badge

Heading 4 Badge

Heading 5 Badge

Paragraph Badge

h1(classes: 'text-xl font-semibold', [
  text('Heading 1 '),
  Badge([text('Badge')], style: [Badge.xl]),
]),
h2(classes: 'text-lg font-semibold', [
  text('Heading 2 '),
  Badge([text('Badge')], style: [Badge.lg]),
]),
h3(classes: 'text-base font-semibold', [
  text('Heading 3 '),
  Badge([text('Badge')], style: [Badge.md]),
]),
h4(classes: 'text-sm font-semibold', [
  text('Heading 4 '),
  Badge([text('Badge')], style: [Badge.sm]),
]),
h5(classes: 'text-xs font-semibold', [
  text('Heading 5 '),
  Badge([text('Badge')], style: [Badge.xs]),
]),
p(classes: 'text-xs', [
  text('Paragraph '),
  Badge([text('Badge')], style: [Badge.xs]),
]),

Badge in a button

Button([
  text('Inbox'),
  Badge([text('+99')], style: [Badge.sm]),
]),
Button([
  text('Inbox'),
  Badge([text('+99')], style: [Badge.sm, Badge.secondary]),
]),