Component specification

Displays short text or icons to represent status, categories, or counts. Badges help users quickly identify important information through visual indicators without cluttering the interface.

• Component Name: N8nBadge
• Figma Component: TBD
• Current Implementation: Custom component (no Element+ dependency)
• Reka UI Component: N/A (Reka UI does not provide a Badge primitive)
• Nuxt UI Reference: Badge (custom implementation, not based on Reka UI)

Public API Definition

Props

• theme?: BadgeTheme - Visual style variant for the badge. Values: 'default' | 'success' | 'warning' | 'danger' | 'primary' | 'secondary' | 'tertiary'. Default: 'default'
  • default: Subtle border badge with neutral styling
  • success: Green indicator for positive states
  • warning: Yellow/orange indicator for cautionary states
  • danger: Red indicator for error/critical states
  • primary: Filled badge with contrasting text (pill-shaped)
  • secondary: Filled badge with tinted background
  • tertiary: Minimal badge variant with reduced padding
• size?: TextSize - Size of the badge text. Values: 'xsmall' | 'small' | 'mini' | 'medium' | 'large' | 'xlarge'. Default: 'small'
• bold?: boolean - Whether to render text in bold weight. Default: false
• showBorder?: boolean - Whether to show the badge border. Default: true

Slots

• default - Badge content (text, icons, or mixed content). Wrapped in N8nText component for consistent typography.

Template usage examples

Simple text badge:

<script setup lang="ts">

</script>

<template>
  
    Read Only
  
</template>

Status indicators:

<script setup lang="ts">

const status = ref<'success' | 'warning' | 'danger'>('success')

const statusTheme = computed(() => {
  const themeMap = {
    success: 'success',
    warning: 'warning',
    danger: 'danger',
  }
  return themeMap[status.value]
})
</script>

<template>
  
    {{ status }}
  
</template>

Count badge (primary theme):

<script setup lang="ts">

const filterCount = ref(5)
</script>

<template>
  
    {{ filterCount }}
  
</template>

Tertiary minimal label:

<script setup lang="ts">

</script>

<template>
  
    Pending
  
</template>

Badge with icon and text:

<script setup lang="ts">

const projectBadge = {
  icon: 'project',
  text: 'Team Project'
}
</script>

<template>
  
    
    <span>{{ projectBadge.text }}</span>
  
</template>

Multiple sizes:

<script setup lang="ts">

</script>

<template>
  XS
  Small
  Medium
</template>

With custom CSS classes:

<script setup lang="ts">

</script>

<template>
  
    Action Required
  
</template>

Conditional rendering:

<script setup lang="ts">

const isReadOnly = ref(true)
const needsSetup = ref(false)
</script>

<template>
  
    Read Only
  

  
    Setup Required
  
</template>

With inline styles (advanced):

<script setup lang="ts">

</script>

<template>
  
    Custom Height
  
</template>

Dynamic theme binding:

<script setup lang="ts">

interface FileStatus {
  status: 'completed' | 'pending' | 'failed'
}

const file = ref({ status: 'completed' })

const getStatusTheme = (status: string): BadgeTheme => {
  const themeMap: Record<string, BadgeTheme> = {
    completed: 'success',
    pending: 'warning',
    failed: 'danger',
  }
  return themeMap[status] || 'default'
}

const statusLabel = (status: string) => {
  const labelMap: Record<string, string> = {
    completed: 'Completed',
    pending: 'Pending',
    failed: 'Failed',
  }
  return labelMap[status] || status
}
</script>

<template>
  
    {{ statusLabel(file.status) }}
  
</template>