New
ListsDivided List
A semantic list of rows with a primary label and an optional trailing meta value.
#list#divided#basic
3 frameworksBeginner
Loading…
Contact rows with a gradient initials avatar, name, email and a trailing action button.
<!--
No external images: the avatar is a gradient circle carrying the initials,
aria-hidden because the name sits right beside it. The email is the row's
secondary line and hides below sm; the trailing button is h-10 w-10 (40px) so
it is a real tap target on touch, never a 24px icon you keep missing.
-->
<ul class="w-full divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 bg-white dark:divide-gray-800 dark:border-gray-800 dark:bg-gray-900" aria-label="Contacts">
<li class="flex items-center gap-3 px-3 py-2.5">
<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 text-xs font-semibold text-white" aria-hidden="true">AO</span>
<span class="min-w-0 flex-1">
<span class="block truncate text-sm font-medium text-gray-900 dark:text-gray-100">Amara Okafor</span>
<span class="block truncate text-xs text-gray-500 dark:text-gray-400">amara@adysre.com</span>
</span>
<button type="button" class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-gray-500 hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus-visible:ring-blue-400" aria-label="Options for Amara Okafor">
<svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5" aria-hidden="true"><path d="M10 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm0 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM11.5 15.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/></svg>
</button>
</li>
</ul>| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | ContactItem[] | - | The array of items to render. |
actionLabel | string | 'Options' | Action label |
ariaLabel | string | 'Contacts' | The button's accessible name. Required for icon-only buttons. |
Avatars are gradient circles carrying initials - no external images, and `aria-hidden` because the name sits beside them. The email hides below `sm` and the trailing button is a full 40px tap target so a thumb never misses it.