Variants

Different configurations and states available for comment components to accommodate various discussion requirements, content presentation needs, and interactive scenarios. These variants provide flexibility in appearance, behavior, and organizational structure while maintaining design consistency across the system.

Comment Item

Discussion elements that display user-generated content, feedback, and conversational interactions within structured communication interfaces. These components serve as the primary content containers for collaborative discussions, adapting their appearance and layout based on content density, user interaction requirements, and contextual presentation to provide clear communication flow and maintain consistent user experience across all comment scenarios.

Spacing Variants

Layout configurations that control the comment item's internal padding and visual separation to optimize readability and content organization. These variants determine the visual density and spacing relationships for different interface contexts and content requirements.

Basic

Standard spacing with balanced padding for optimal readability and comfortable content separation. Use for most comment implementations requiring clear visual hierarchy, standard discussion interfaces, or when maintaining optimal balance between content density and user comfort.

Flush

Minimal spacing with reduced padding for dense layouts and space-efficient content presentation. Use when maximizing content visibility, compact discussion interfaces, or when visual elements need minimal separation while maintaining functional readability.

Size Variants

Dimensional configurations that control the comment item scale and content presentation to optimize usability across different screen sizes and device capabilities. These variants determine the spatial organization and readability characteristics for various display contexts.

Large

Expanded comment item dimensions optimized for tablet and desktop environments with generous screen real estate. Use for detailed comment threads, comprehensive discussions, multi-line content, or when providing extensive interaction areas and enhanced readability on larger displays.

Small

Compact comment item dimensions optimized for mobile devices and space-constrained environments. Use for mobile comment threads, simplified discussions, essential commenting, or when screen space requires efficient use while maintaining clear communication and interaction capabilities.

Comment Form

Input interface elements that enable users to create, edit, and submit comment content within discussion systems. These components serve as the primary content creation interface for collaborative discussions, managing input functionality, submission controls, and content formatting while maintaining consistent interaction patterns across different comment scenarios.

Spacing Variants

Layout configurations that control the comment form's internal padding and visual organization to optimize usability and content creation experience. These variants determine the visual density and spacing relationships for different input contexts and interface requirements.

Basic

Standard spacing with balanced padding for optimal input comfort and clear form organization. Use for most comment form implementations requiring comfortable content creation, standard discussion interfaces, or when maintaining optimal balance between form usability and interface integration.

Flush

Minimal spacing with reduced padding for compact form layouts and space-efficient input presentation. Use when maximizing content creation area, dense discussion interfaces, or when form elements need minimal visual separation while maintaining functional usability.