Badges

Creating and Styling Badges

To create and style badges in your Rapture app, follow these steps:

1. Determine Badge Purpose: Decide why you want to use badges. Are they for notifications, status indicators, labels, or something else?

2. Choose Badge Content: Determine what content you want to display within the badge. This could be text, numbers, icons, or a combination of these.

3. Use Semantic HTML: Use semantic HTML elements like <span> to create badges. Add appropriate classes or attributes to apply styling.

4. Apply CSS Styling: Apply CSS styles to your badges to match your app's design system. Consider background colors, text colors, borders, and padding.

Types of Badges

1. Status Badges: These badges indicate the status of an item, such as "New," "Featured," or "Approved." Use different colors to differentiate between statuses.

2. Notification Badges: Notification badges are often used to alert users to new messages, updates, or activities.

3. Label Badges: Label badges provide additional context or categorization, such as "Hot Deal," "Important," or "Trending."

Badge Placement

You can place badges on various UI elements, such as:

• Buttons: Indicate the purpose of a button, e.g., "Add to Cart."

• Avatars: Show online/offline status or user roles.

• Icons: Add badges to icons for extra context.

Interaction and Accessibility

Ensure your badges are interactive and accessible:

• Hover Interaction: Consider adding hover effects to provide tooltips or additional information when users hover over badges.

• Focus States: When badges are interactive, ensure they are navigable using keyboard tabbing for accessibility.

Best Practices

• Subtle Design: Badges should enhance, not overwhelm, the user interface. Use subtle design elements that align with your app's visual language.

• Color Consistency: Maintain color consistency across badges to ensure users can quickly interpret their meaning.