Comments Bottom Sheet

ProNew

A two-height bottom sheet showing a comment list with a count, and a composer fixed at the bottom that posts a comment and announces it. Use this when a post, video or product has comments that people read and add to without leaving the page.

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 it when a post, video or product has comments that people read and add to without leaving the page.

Do not use it for a full discussion with threads and moderation, which deserves its own page.

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.

Props

Prop	Type	Default	Description
`comments`	`Comment[]`	`required`	`{ id, author, text }`.
`onPost`	`(text: string) => void`	`required`	Called with the new comment.

Accessibility

The list is a labelled list inside the dialog; the title says how many comments there are.
The composer is an input with a visible Post button, kept above the on-screen keyboard; posting is announced ("Comment posted") and the field is cleared and refocused.
The handle changes the height by keyboard (Up and Down).

Testing

The pattern ships with a Testing Library test (comments-bottom-sheet.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when a post, video or product has comments that people read and add to without leaving the page.

Do not use it for a full discussion with threads and moderation, which deserves its own page.

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.

Props

Prop	Type	Default	Description
`comments`	`Comment[]`	`required`	`{ id, author, text }`.
`onPost`	`(text: string) => void`	`required`	Called with the new comment.

Accessibility

The list is a labelled list inside the dialog; the title says how many comments there are.
The composer is an input with a visible Post button, kept above the on-screen keyboard; posting is announced ("Comment posted") and the field is cleared and refocused.
The handle changes the height by keyboard (Up and Down).

Testing

The pattern ships with a Testing Library test (comments-bottom-sheet.test.tsx) that drives it through roles and the keyboard.