UIDex

What is the difference?

Badge vs Chip / Tag

The difference is ownership and interaction. A badge is attached to something else and describes it: a number over an icon, a dot that says there is something new. You do not click it or remove it. A chip stands on its own and is clickable: it filters, selects, or removes itself with its own small button.

Ask yourself one question

If you removed the thing beside it, would this still mean anything on its own?

الاسم المقروء للجرس: «الإشعارات، 3 إشعارات غير مقروءة»الإشعارات، 3 إشعارات غير مقروءة. الرسائل، 128 رسالة غير مقروءة. الحساب، يوجد نشاط جديد.الشارة نفسها ليست زرّاً، والضغط عليها يمرّ إلى الأيقونة تحتها.
RTLالشارة تنتقل إلى ركن النهاية المنطقية، والرقم معزول بـ dir="ltr"

Badge

الشارة
role="status" / badgeContent

Use it when

The unread count over a mail icon, a new dot on a list item, or a draft status on a table row.

Full entry

تصفية النتائج

الكلمات المفتاحية

تصميمإتاحةReact 18

RTLسهم اليمين ينتقل للشريحة السابقة، والـ × عند النهاية المنطقية

Chip / Tag

الشريحة
<button> / role="option"

Use it when

Active filters the user can remove, tags added into a field, or selectable options in a group.

Full entry

The classic mistake

A badge holding only a number with no accessible name. A screen reader says "3" next to "Mail" and never says three of what. The fix is a full name such as three unread messages.

Other comparisons