Announcement
A compound badge for displaying announcements with a tag label, title text, and optional link.
Installation
tsx
import { Announcement, AnnouncementTag, AnnouncementTitle } from "madagent";Default
NewDesign system v2.0 is here
With Link
Variants
Without Tag
Announcement
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default""info""success""warning""error" | "default" | Visual variant |
href | string | - | Makes the announcement a clickable link with an arrow icon |
children | ReactNode | - | AnnouncementTag and/or AnnouncementTitle |
AnnouncementTag
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Tag label text |
AnnouncementTitle
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Announcement message text |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Usage
tsx
<div style={{ display: "flex", flexDirection: "column", gap: 12, alignItems: "flex-start" }}>
<Announcement href="#">
<AnnouncementTag>جديد</AnnouncementTag>
<AnnouncementTitle>نظام التصميم الإصدار الثاني متاح الآن</AnnouncementTitle>
</Announcement>
<Announcement variant="success" href="#">
<AnnouncementTag>مباشر</AnnouncementTag>
<AnnouncementTitle>تم النشر بنجاح</AnnouncementTitle>
</Announcement>
</div>