Badge ComponentsLink to section

The Badge component system provides flexible, visually appealing cards for showcasing projects, features, or any content that benefits from visual hierarchy.

Basic BadgeLink to section

The simplest badge configuration with just a title:

<Badge title="Simple Badge" />

Badge with DescriptionLink to section

Add context with a description:

<Badge
  title="Feature Badge"
  description="This badge includes a helpful description to provide more context."
/>

Clickable BadgesLink to section

Make badges interactive by adding an href:

<Badge
  title="Learn More"
  description="Click to navigate to another page"
  href="/demo"
/>

Badge IconsLink to section

Badges support various icon types:

Emoji IconsLink to section

<Badge
  title="Emoji Icon"
  description="Using an emoji as the icon"
  icon={{ type: 'emoji', emoji: '🚀' }}
/>

Image IconsLink to section

<Badge
  title="Image Icon"
  description="Using an image file as the icon"
  icon={{ type: 'img', src: '/favicons/tmuxp.svg' }}
/>

Initial IconsLink to section

When no icon is provided, the badge automatically generates initials:

<Badge
  title="Tony Narlock"
  description="Initials are automatically generated from the title"
/>

Badge Grid LayoutLink to section

Use BadgeGrid and BadgeGridItem for organized layouts:

<BadgeGrid>
  <BadgeGridItem>
    <Badge
      title="First Item"
      description="Part of a grid layout"
      icon={{ type: 'emoji', emoji: '1️⃣' }}
    />
  </BadgeGridItem>
  <BadgeGridItem>
    <Badge
      title="Second Item"
      description="Another grid item"
      icon={{ type: 'emoji', emoji: '2️⃣' }}
    />
  </BadgeGridItem>
  <BadgeGridItem>
    <Badge
      title="Third Item"
      description="Grid layouts are responsive"
      icon={{ type: 'emoji', emoji: '3️⃣' }}
    />
  </BadgeGridItem>
</BadgeGrid>

Text TruncationLink to section

Control description length with lineClamp:

<Badge
  title="Long Description"
  description="This is a very long description that would normally take up multiple lines. The lineClamp property controls how many lines are shown before truncating with an ellipsis. This is useful for maintaining consistent card heights in grid layouts."
  lineClamp={2}
/>

<Badge
  title="Full Description"
  description="This description is not truncated because we set lineClamp to a high value. You can see the entire text without any ellipsis. This is useful when you want to show complete information."
  lineClamp={10}
/>

Corner DecorationsLink to section

Add visual flair with corner elements:

<Badge
  title="Decorated Badge"
  description="This badge has decorative corners"
  corners={{
    topLeft: '✨',
    topRight: '🌟',
    bottomLeft: '💫',
    bottomRight: '⭐'
  }}
/>

Real-World ExamplesLink to section

Project ShowcaseLink to section

<BadgeGrid>
  <BadgeGridItem>
    <Badge
      title="tmuxp"
      description="Session manager for tmux"
      icon={{ type: 'img', src: '/favicons/tmuxp.svg' }}
      href="https://tmuxp.git-pull.com"
    />
  </BadgeGridItem>
  <BadgeGridItem>
    <Badge
      title="libtmux"
      description="Python API for tmux"
      icon={{ type: 'img', src: '/favicons/libtmux.svg' }}
      href="https://libtmux.git-pull.com"
    />
  </BadgeGridItem>
</BadgeGrid>

Feature HighlightsLink to section

<BadgeGrid>
  <BadgeGridItem>
    <Badge
      title="Fast Performance"
      description="Optimized for speed"
      icon={{ type: 'emoji', emoji: '⚡' }}
    />
  </BadgeGridItem>
  <BadgeGridItem>
    <Badge
      title="Secure by Default"
      description="Built with security in mind"
      icon={{ type: 'emoji', emoji: '🔒' }}
    />
  </BadgeGridItem>
  <BadgeGridItem>
    <Badge
      title="Developer Friendly"
      description="Great developer experience"
      icon={{ type: 'emoji', emoji: '💻' }}
    />
  </BadgeGridItem>
</BadgeGrid>

Styling and ThemingLink to section

Badges automatically adapt to light and dark themes:

Light mode: White background with subtle border
Dark mode: Dark background with adjusted colors
Hover states provide visual feedback
Focus states for keyboard navigation

Component Props ReferenceLink to section

Prop	Type	Default	Description
`title`	string	required	The main text displayed in the badge
`description`	string	optional	Supporting text below the title
`href`	string	optional	Makes the badge a clickable link
`icon`	IconProp	optional	Icon configuration (emoji or image)
`lineClamp`	number	2	Number of lines before truncating description
`corners`	object	optional	Decorative corner elements
`class`	string	optional	Additional CSS classes

Best PracticesLink to section

Keep titles concise - They should be scannable
Use descriptive text - Help users understand the purpose
Choose appropriate icons - They should relate to the content
Maintain consistency - Use similar styles across your badges
Consider mobile - Test how badges look on smaller screens