Badge Types and Styles

Explore different badge types (frequency, tier, activity) and style options (flat, plastic, dark themes) available for your badges.

All Articles

Badge Types and Styles

ChangeCrab badges offer multiple types and style options to match your needs and brand. Choose the combination that works best for your website or documentation.

Badge Types

Badge types determine what information your badge displays. All types are available to all users:

1. Update Frequency (Default)

Shows how often you update your changelog based on your tier level:

  • Gold Tier - Displays "Updated Weekly"
  • Silver Tier - Displays "Updated Fortnightly"
  • Bronze Tier - Displays "Updated Quarterly"
  • Inactive - Displays "Inactive"

This is the default badge type and provides a clear signal about your update frequency.

2. Tier Level

Displays your current tier level directly:

  • Shows "Bronze", "Silver", "Gold", or "Inactive"
  • Badge color matches the tier (Bronze: orange, Silver: gray, Gold: yellow, Inactive: gray)
  • Perfect for showcasing your achievement level

3. Activity Indicator

Simple active/inactive status:

  • Shows "Active" if you have any updates in the last 60 days
  • Shows "Inactive" if no updates in the last 61 days
  • Minimal, straightforward indicator

Badge Styles

Badge styles control the visual appearance of your badge. Free users have access to the "Flat" style, while paid users can choose from all available styles:

Available Styles

Flat (Free Users)

  • Clean, modern flat design
  • Rounded corners
  • Subtle gradient overlay
  • Available to all users

Plastic (Paid Users)

  • 3D plastic effect with depth
  • Enhanced gradient for dimensional look
  • Rounded corners
  • Premium appearance

Flat Square (Paid Users)

  • Flat design with square corners
  • No border radius
  • Clean, geometric appearance
  • Matches square design systems

Flat Dark (Paid Users)

  • Dark theme variant of flat style
  • Dark background on left side
  • Perfect for dark websites
  • Rounded corners

Plastic Dark (Paid Users)

  • Dark theme with plastic effect
  • 3D appearance on dark background
  • Ideal for dark-themed sites
  • Rounded corners

Flat Square Dark (Paid Users)

  • Dark theme with square corners
  • Geometric dark design
  • Square corners, dark background
  • Matches dark square design systems

Attribution Options

Badges can include or hide the "ChangeCrab" attribution text:

  • With Attribution (Free Users) - Shows "ChangeCrab" text next to the logo. Required for free users.
  • Minimal (Paid Users) - Hides the "ChangeCrab" text, showing only the logo. Available to paid subscribers.

Choosing the Right Combination

Consider these factors when choosing your badge type and style:

  • Website Theme - Match your site's color scheme (light/dark)
  • Design System - Choose rounded or square to match your design language
  • Information Priority - Frequency shows update cadence, Tier shows achievement, Activity shows simple status
  • Branding - Paid users can hide attribution for a cleaner look

Examples

Here are some common use cases:

  • GitHub README - Frequency type, Flat style, with attribution
  • Dark Website - Tier type, Flat Dark style, minimal attribution
  • Documentation Site - Activity type, Plastic style, with attribution
  • Product Landing Page - Frequency type, Flat Square style, minimal attribution

Next Steps