Componentsstable
Announcement Badge
A flexible composite component for displaying announcements, updates, and badges with icons, text, and separators.
Installation
Install the component directly into your project using the Pittaya CLI.
npx pittaya@latest add announcement-badge
When to use
Use the Announcement Badge to highlight new features, product updates, or important notifications in a compact and visually appealing format.
This component works best in hero sections, above navigation bars, or at the top of content areas where you need to draw attention without being intrusive.
Best practices
- Keep announcement text concise and actionable—aim for 3-5 words maximum.
- Use the
glassEffectvariant when placing the badge over images or gradient backgrounds. - Combine icons with text to quickly communicate the nature of the announcement (e.g., 🎉 for launches, 🚀 for new features).
- Use
AnnouncementSeparatorto create visual hierarchy between different pieces of information.
Accessibility
The component uses semantic HTML with proper contrast ratios for text and borders. When using icons alone, ensure you provide descriptive text alternatives for screen readers.
If the announcement is clickable or interactive, wrap it in a proper button or link element with clear labeling to communicate the action to assistive technologies.
Examples
Combine variants and sizes to meet your needs.
With icon
Use AnnouncementText before the separator to highlight a status or category.
With text badge
Use AnnouncementText before the separator for a more visual approach.
Interactive with link
Make the announcement clickable by wrapping it in a link, with an arrow icon at the end.
Glass effect variant
Use the glass effect variant for announcements over images or gradients.
With Emoji
Use Emoji for more design consistency and flexibility.
Properties
TSX interface that combines variants and default attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
AnnouncementContainer | component | — | The main wrapper component that holds all announcement elements. |
variant | 'default' | 'glassEffect' | 'default' | Controls the background style. Use glassEffect for transparent backgrounds with backdrop blur. |
AnnouncementText | component | — | Displays highlighted text in a badge format with background and border. |
textRequired | string | — | The text content to display inside the badge. |
AnnouncementIcon | component | — | Displays an icon from lucide-react or a string (like emoji). |
iconRequired | LucideIcon | string | — | The icon to display. Can be a Lucide icon component or a string (emoji). |
AnnouncementSeparator | component | — | A vertical divider to separate different sections of the announcement. |
AnnouncementTitle | component | — | The main title or description text of the announcement. |