Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Accordion Badges Disabled

ProNew

Accordion items with text badges such as New and a locked state that stays discoverable: disabled but spelled out in the header's name with the reason.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use this for feature lists across plans, where locked entries advertise what an upgrade unlocks.

Do not hide the reason or rely on a lock icon alone, and do not use locked items for things people could do themselves.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Log in Get Pro for $35

Props

AccordionBadgesDisabled

Prop	Type	Default	Description
`items`	`{ value, title, content, badge?, lockedReason? }[]`	-	Items; a `lockedReason` disables and explains.

Accessibility

Badges are text inside the header, so "AI insights New" is what is read.
A locked item is disabled and its name says ", locked: Upgrade to Pro" through hidden text, so a screen reader user still learns it exists and why it is unavailable.
Only one item is open at a time.

Keyboard

Key	Action
Enter or Space	opens an available item
Tab	skips locked items (they are disabled)

Testing

The pattern ships a Testing Library test (accordion-badges-disabled.test.tsx) that covers badges in names, locked names with reasons, not opening locked items and single-open behaviour.