SidebarItem
Composable rows for channel, direct-message, and member lists.
Navigation
Channels
Direct messages
import {
SidebarItem,
SidebarItemAside,
SidebarItemChannelIcon,
SidebarItemContent,
SidebarItemCount,
SidebarItemCountSeparator,
SidebarItemIndicator,
SidebarItemMetaIcon,
SidebarItemSubtitle,
SidebarItemThreadCount,
SidebarItemTitle,
} from "raft-ui";
<SidebarItem active>
<SidebarItemChannelIcon />
<SidebarItemContent>
<SidebarItemTitle />
<SidebarItemSubtitle />
</SidebarItemContent>
<SidebarItemAside>
<SidebarItemIndicator />
<SidebarItemCount>
5
<SidebarItemCountSeparator />
<SidebarItemThreadCount>1</SidebarItemThreadCount>
</SidebarItemCount>
<SidebarItemMetaIcon />
</SidebarItemAside>
</SidebarItem>API#WIP
activedefault: falseboolean
Marks the row as active. Sets data-active for visual state; route consumers provide aria-current for the current destination.
tonedefault: "default""default" | "unread" | "muted" | "away"
unread: a 700 name. muted: an ink-2 name. away (offline, not joined): an ink-3 name. The active sticker keeps its ink.
interactivedefault: trueboolean
false renders a display-only div with no hover, press or focus ring, for a row whose own buttons are the targets.
...propsuseRender.ComponentProps<"button">
Interactive row root. Unread state is composed from explicit indicators and counts.
| Prop | Type | Default | Description |
|---|---|---|---|
active | boolean | false | Marks the row as active. Sets data-active for visual state; route consumers provide aria-current for the current destination. |
tone | "default" | "unread" | "muted" | "away" | "default" | unread: a 700 name. muted: an ink-2 name. away (offline, not joined): an ink-3 name. The active sticker keeps its ink. |
interactive | boolean | true | false renders a display-only div with no hover, press or focus ring, for a row whose own buttons are the targets. |
...props | useRender.ComponentProps<"button"> | — | Interactive row root. Unread state is composed from explicit indicators and counts. |
...propsuseRender.ComponentProps<"span">
Leading avatar or general icon slot for a row.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Leading avatar or general icon slot for a row. |
...propsuseRender.ComponentProps<"span">
Leading icon container. Pass the concrete icon as its child.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Leading icon container. Pass the concrete icon as its child. |
stackeddefault: falseboolean
Stacks title and subtitle vertically when the row needs secondary activity copy.
...propsuseRender.ComponentProps<"span">
Groups title and subtitle content.
| Prop | Type | Default | Description |
|---|---|---|---|
stacked | boolean | false | Stacks title and subtitle vertically when the row needs secondary activity copy. |
...props | useRender.ComponentProps<"span"> | — | Groups title and subtitle content. |
...propsuseRender.ComponentProps<"span">
Truncating primary destination label.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Truncating primary destination label. |
...propsuseRender.ComponentProps<"span">
Truncating secondary activity copy.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Truncating secondary activity copy. |
...propsuseRender.ComponentProps<"span">
Low-emphasis inline metadata beside row content.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Low-emphasis inline metadata beside row content. |
...propsuseRender.ComponentProps<"span">
Trailing layout slot for consumer-chosen metadata parts.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Trailing layout slot for consumer-chosen metadata parts. |
...propsuseRender.ComponentProps<"span">
Availability-status slot. Consumers provide the Status child's size, label, and state variant.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Availability-status slot. Consumers provide the Status child's size, label, and state variant. |
...propsOmit<BadgeProps, "appearance" | "variant">
Mention indicator, always the yellow @ sticker. Supply an accessible label.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Omit<BadgeProps, "appearance" | "variant"> | — | Mention indicator, always the yellow @ sticker. Supply an accessible label. |
...propsOmit<BadgeProps, "appearance" | "variant">
Unread-count badge in the trailing area, always the pink sticker. Compose the channel's own count and a SidebarItemThreadCount with a SidebarItemCountSeparator between them.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Omit<BadgeProps, "appearance" | "variant"> | — | Unread-count badge in the trailing area, always the pink sticker. Compose the channel's own count and a SidebarItemThreadCount with a SidebarItemCountSeparator between them. |
...propsuseRender.ComponentProps<"span">
Decorative dot between the message count and the thread count. Hidden from assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Decorative dot between the message count and the thread count. Hidden from assistive technology. |
childrenReactNode
Number of followed threads with new replies (not the number of replies).
labeldefault: "threads with new replies"string
Visually hidden words read after the number so screen readers hear what it counts. Pass localized copy.
...propsuseRender.ComponentProps<"span">
Thread icon plus count. Use inside SidebarItemCount for a loud badge, or inside SidebarItemMeta for a muted channel.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Number of followed threads with new replies (not the number of replies). |
label | string | "threads with new replies" | Visually hidden words read after the number so screen readers hear what it counts. Pass localized copy. |
...props | useRender.ComponentProps<"span"> | — | Thread icon plus count. Use inside SidebarItemCount for a loud badge, or inside SidebarItemMeta for a muted channel. |
...propsuseRender.ComponentProps<"span">
Draft, muted, or other low-emphasis metadata icon.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Draft, muted, or other low-emphasis metadata icon. |