Comment

The Comment component provides a reusable pattern for comment in the interface.

Comment Thread Example

The comment can be used as a top level comment and as a reply.

Peter Svensson

2 år ago

This is a comment text

Reply Like

Peter Olsson

1 år ago

This is a reply comment text

Peter Olsson

just now

This is a reply comment text, it was written now.

Peter Olsson

2 minuter ago

This is a reply comment text, it was written two minutes ago.

Peter Olsson

5 timmar ago

This is a reply comment text, it was written five hours ago.

Peter Svensson

1 år ago

This comment content was sent through the slot.

<div class="c-comment"  data-uid="69f0d09e24c92" data-component="comment">

    <div class="c-comment__col">
            <!-- avatar.blade.php -->

    <div class="c-avatar c-avatar--size-md" data-uid="69f0d09e24d1b" data-component="avatar">
        
        
        
        
                    <span class="c-avatar__icon" aria-label="Peter Svensson">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--size-lg c-icon--face c-icon--material c-icon--material-face material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" data-material-symbol="face" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d09e24d62" data-component="icon">
                    </span>
            </span>
        
        
                
    </div>

    </div>

    <div class="c-comment__col">

        <div class="c-comment__top">

                <a class="c-link c-comment__link" href="#" target="_top" data-uid="69f0d09e24e40" data-component="link">
        <!-- typography.blade.php   original: h6 -->
<h2 class="c-typography c-comment__author c-typography__variant--h2" data-uid="69f0d09e24ddb" data-component="typography">
    Peter Svensson
</h2>
    </a>
    
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="69f0d09e24f1f" data-component="typography">
    <time class="c-date" data-date="2023-10-25T10:11:46" datetime="2023-10-25T10:11:46" data-tooltip="Wed 25 Oct 2023" data-uid="69f0d09e24edf" data-component="date">2 år ago</time>
</span>                    </div>
    
        <div class="c-comment__bubble c-comment__bubble--color-dark">
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-comment__bubble--inner c-typography__variant--body" data-uid="69f0d09e24f59" data-component="typography">
    This is a comment text
</p>                
                    </div>

                    <div class="c-comment__actions">
                <a class="c-button c-button__basic c-button__basic--default c-button--sm" href="#reply" target="_top" aria-label="Reply" data-uid="69f0d09e247f6" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--reply c-icon--material c-icon--material-reply material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" data-material-symbol="reply" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09e24989" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Reply
            </span>
        
    </span> </a>
            <a class="c-button c-button__basic c-button__basic--default c-button--sm" href="#like" target="_top" aria-label="Like" data-uid="69f0d09e249f9" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--thumb-up c-icon--material c-icon--material-thumb_up material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" data-material-symbol="thumb_up" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09e24a3e" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Like
            </span>
        
    </span> </a>
            </div>
            </div>
</div>
    <div class="c-comment c-comment__is-reply"  data-uid="69f0d09e24fa5" data-component="comment">

    <div class="c-comment__col">
            <!-- avatar.blade.php -->

    <div class="c-avatar c-avatar--size-md" data-uid="69f0d09e24fed" data-component="avatar">
        
        
                        <!-- image.blade.php -->
    <figure class="c-image c-avatar__image c-image--cover" aria-label="Peter Olsson" data-uid="69f0d09e25058" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/338/70/70" 
    alt="Peter Olsson"
    
></div>                        </figure>

        
        
        
        
                
    </div>

    </div>

    <div class="c-comment__col">

        <div class="c-comment__top">

                <div class="c-link c-comment__link" data-uid="69f0d09e2514b" data-component="link">
        <!-- typography.blade.php   original: h6 -->
<h3 class="c-typography c-comment__author c-typography__variant--h3" data-uid="69f0d09e25118" data-component="typography">
    Peter Olsson
</h3>
    </div>
    
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="69f0d09e251cb" data-component="typography">
    <time class="c-date" data-date="2025-03-23T15:22:06" datetime="2025-03-23T15:22:06" data-tooltip="Sun 23 Mar 2025" data-uid="69f0d09e25193" data-component="date">1 år ago</time>
</span>                    </div>
    
        <div class="c-comment__bubble c-comment__bubble--color-dark">
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-comment__bubble--inner c-typography__variant--body" data-uid="69f0d09e251ff" data-component="typography">
    This is a reply comment text
</p>                
                    </div>

            </div>
</div>
    <div class="c-comment c-comment__is-reply"  data-uid="69f0d09e2523d" data-component="comment">

    <div class="c-comment__col">
            <!-- avatar.blade.php -->

    <div class="c-avatar c-avatar--size-md" data-uid="69f0d09e25271" data-component="avatar">
        
        
                        <!-- image.blade.php -->
    <figure class="c-image c-avatar__image c-image--cover" aria-label="Peter Olsson" data-uid="69f0d09e252a3" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/342/70/70" 
    alt="Peter Olsson"
    
></div>                        </figure>

        
        
        
        
                
    </div>

    </div>

    <div class="c-comment__col">

        <div class="c-comment__top">

                <div class="c-link c-comment__link" data-uid="69f0d09e25352" data-component="link">
        <!-- typography.blade.php   original: h6 -->
<h4 class="c-typography c-comment__author c-typography__variant--h4" data-uid="69f0d09e2531f" data-component="typography">
    Peter Olsson
</h4>
    </div>
    
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="69f0d09e253d4" data-component="typography">
    <time class="c-date" data-date="2026-04-28T15:22:06" datetime="2026-04-28T15:22:06" data-tooltip="Tue 28 Apr 2026" data-uid="69f0d09e25393" data-component="date">just now </time>
</span>                    </div>
    
        <div class="c-comment__bubble c-comment__bubble--color-dark">
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-comment__bubble--inner c-typography__variant--body" data-uid="69f0d09e25406" data-component="typography">
    This is a reply comment text, it was written now.
</p>                
                    </div>

            </div>
</div>
    <div class="c-comment c-comment__is-reply"  data-uid="69f0d09e25446" data-component="comment">

    <div class="c-comment__col">
            <!-- avatar.blade.php -->

    <div class="c-avatar c-avatar--size-md" data-uid="69f0d09e2547a" data-component="avatar">
        
        
                        <!-- image.blade.php -->
    <figure class="c-image c-avatar__image c-image--cover" aria-label="Peter Olsson" data-uid="69f0d09e254ac" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/342/70/70" 
    alt="Peter Olsson"
    
></div>                        </figure>

        
        
        
        
                
    </div>

    </div>

    <div class="c-comment__col">

        <div class="c-comment__top">

                <div class="c-link c-comment__link" data-uid="69f0d09e25559" data-component="link">
        <!-- typography.blade.php   original: h6 -->
<h5 class="c-typography c-comment__author c-typography__variant--h5" data-uid="69f0d09e25529" data-component="typography">
    Peter Olsson
</h5>
    </div>
    
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="69f0d09e255d1" data-component="typography">
    <time class="c-date" data-date="2026-04-28T15:20:06" datetime="2026-04-28T15:20:06" data-tooltip="Tue 28 Apr 2026" data-uid="69f0d09e2559b" data-component="date">2 minuter ago</time>
</span>                    </div>
    
        <div class="c-comment__bubble c-comment__bubble--color-dark">
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-comment__bubble--inner c-typography__variant--body" data-uid="69f0d09e25603" data-component="typography">
    This is a reply comment text, it was written two minutes ago.
</p>                
                    </div>

            </div>
</div>
    <div class="c-comment c-comment__is-reply"  data-uid="69f0d09e25642" data-component="comment">

    <div class="c-comment__col">
            <!-- avatar.blade.php -->

    <div class="c-avatar c-avatar--size-md" data-uid="69f0d09e25676" data-component="avatar">
        
        
                        <!-- image.blade.php -->
    <figure class="c-image c-avatar__image c-image--cover" aria-label="Peter Olsson" data-uid="69f0d09e256a6" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/64/70/70" 
    alt="Peter Olsson"
    
></div>                        </figure>

        
        
        
        
                
    </div>

    </div>

    <div class="c-comment__col">

        <div class="c-comment__top">

                <div class="c-link c-comment__link" data-uid="69f0d09e25751" data-component="link">
        <!-- typography.blade.php   original: h6 -->
<h6 class="c-typography c-comment__author c-typography__variant--h6" data-uid="69f0d09e25722" data-component="typography">
    Peter Olsson
</h6>
    </div>
    
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="69f0d09e257d6" data-component="typography">
    <time class="c-date" data-date="2026-04-28T10:22:06" datetime="2026-04-28T10:22:06" data-tooltip="Tue 28 Apr 2026" data-uid="69f0d09e2579f" data-component="date">5 timmar ago</time>
</span>                    </div>
    
        <div class="c-comment__bubble c-comment__bubble--color-dark">
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-comment__bubble--inner c-typography__variant--body" data-uid="69f0d09e25808" data-component="typography">
    This is a reply comment text, it was written five hours ago.
</p>                
                    </div>

            </div>
</div>
    <div class="c-comment"  data-uid="69f0d09e25845" data-component="comment">

    <div class="c-comment__col">
            <!-- avatar.blade.php -->

    <div class="c-avatar c-avatar--size-md" data-uid="69f0d09e2587f" data-component="avatar">
        
        
        
        
        
        
                    <svg class="c-avatar__initials" aria-label="Peter Svensson" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <text font-size="380" y="50%" x="50%" fill="#fff" dominant-baseline="middle" text-anchor="middle" alignment-baseline="central">PS</text>
            </svg>
                
    </div>

    </div>

    <div class="c-comment__col">

        <div class="c-comment__top">

                <div class="c-link c-comment__link" data-uid="69f0d09e258e3" data-component="link">
        <!-- typography.blade.php   original: h6 -->
<h6 class="c-typography c-comment__author c-typography__variant--h6" data-uid="69f0d09e258b4" data-component="typography">
    Peter Svensson
</h6>
    </div>
    
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="69f0d09e25957" data-component="typography">
    <time class="c-date" data-date="2025-04-28T15:22:06" datetime="2025-04-28T15:22:06" data-tooltip="Mon 28 Apr 2025" data-uid="69f0d09e25923" data-component="date">1 år ago</time>
</span>                    </div>
    
        <div class="c-comment__bubble c-comment__bubble--color-dark">
                
                            <div class="c-comment__bubble--inner">
                    This comment <u>content</u> was sent through the slot.
                </div>
                    </div>

            </div>
</div>

<?php 
    $labels = [
        'dateLabels' => [
            'year' => 'år',
            'month' => 'månad',
            'week' => 'vecka',
            'day' => 'dag',
            'hour' => 'timme',
            'minute' => 'minut',
            'second' => 'sekund'
            ],
        'dateLabelsPlural' => [
            'year' => 'år',
            'month' => 'månader',
            'week' => 'veckor',
            'day' => 'dagar',
            'hour' => 'timmar',
            'minute' => 'minuter',
            'second' => 'sekund'
        ]
    ];
?>



@comment([
    'author' => 'Peter Svensson',
    'author_url' => '#',
    'text' => 'This is a comment text',
    'icon' => 'face',
    'date' => date("Y-m-d H:i:s", strtotime('-2 years -6 months -3days -5 hours -10 minutes -20 seconds')),
    'dateLabels' => $labels['dateLabels'],
    'dateLabelsPlural' => $labels['dateLabelsPlural']
])
    @slot('actions')
        @button([
            'text' => 'Reply',
            'color' => 'default',
            'style' => 'basic',
            'href' => '#reply',
            'icon' => 'reply',
            'size' => 'sm'
        ])
        @endbutton

        @button([
            'text' => 'Like',
            'color' => 'default',
            'style' => 'basic',
            'href' => '#like',
            'icon' => 'thumb_up',
            'size' => 'sm'
        ])
        @endbutton
    @endslot
@endcomment

@comment([
    'author' => 'Peter Olsson',
    'text' => 'This is a reply comment text',
    'icon' => 'face',
    'author_image' => 'https://picsum.photos/id/338/70/70',
    'date' => date("Y-m-d H:i:s", strtotime('-1 year -1 month -5 days')),
    'is_reply' => true,
    'dateLabels' => $labels['dateLabels'],
    'dateLabelsPlural' => $labels['dateLabelsPlural']
])
@endcomment

@comment([
    'author' => 'Peter Olsson',
    'text' => 'This is a reply comment text, it was written now.',
    'icon' => 'face',
    'author_image' => 'https://picsum.photos/id/342/70/70',
    'date' => date("Y-m-d H:i:s"),
    'is_reply' => true,
    'dateLabels' => $labels['dateLabels'],
    'dateLabelsPlural' => $labels['dateLabelsPlural']
])
@endcomment

@comment([
    'author' => 'Peter Olsson',
    'text' => 'This is a reply comment text, it was written two minutes ago.',
    'icon' => 'face',
    'author_image' => 'https://picsum.photos/id/342/70/70',
    'date' => date("Y-m-d H:i:s", strtotime('-2 minutes')),
    'is_reply' => true,
    'dateLabels' => $labels['dateLabels'],
    'dateLabelsPlural' => $labels['dateLabelsPlural']
])
@endcomment

@comment([
    'author' => 'Peter Olsson',
    'text' => 'This is a reply comment text, it was written five hours ago.',
    'icon' => 'face',
    'author_image' => 'https://picsum.photos/id/64/70/70',
    'date' => date("Y-m-d H:i:s", strtotime('-5 hours')),
    'is_reply' => true,
    'dateLabels' => $labels['dateLabels'],
    'dateLabelsPlural' => $labels['dateLabelsPlural']
])
@endcomment

@comment([
    'author' => 'Peter Svensson',
    'date' => date("Y-m-d H:i:s", strtotime('-1 year')),
    'dateLabels' => $labels['dateLabels'],
    'dateLabelsPlural' => $labels['dateLabelsPlural']
])
    This comment <u>content</u> was sent through the slot.
@endcomment

API

Parameter	Default	Description
author		Name of the commenter
author_url		URL to the profile of the author
author_image		A link to an image
text		Content of the comment
icon		Which icon to show
bubble_color	dark	Color for comment bubble background: light or dark
date	01/02/2019	The date when the comment was posted
date_suffix	ago	Time elapsed 'since'
dateLabels	[]	Array containing translations valid keys: year, month, week, day, hour, minute, second
dateLabelsPlural	[]	Array containing translations valid keys: year, month, week, day, hour, minute, second
componentElement	div	Element of the component
is_reply	false	If true the comment will be displayed as a reply
filterHtml	false	If set to true the comment will be filtered from html tags
allowedTags		Which tags should be excluded from filtration

CSS API

Variable	Default	Type	Values	Description
--c-comment--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-comment--outer-space	var(--outer-space)	range	-	Spacing between components. Use --space for spacing inside components.
--c-comment--border-radius	var(--border-radius)	range	-	Border Radius
--c-comment--color--surface	var(--color--surface)	color	-	Surface
--c-comment--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-comment--color--surface-contrast	var(--color--surface-contrast)	color	-	Used for text and icons on surface backgrounds with less contrast.
--c-comment--color--background-contrast-muted	var(--color--background-contrast-muted)	color	-	Derived muted contrast for text and icons on background surfaces.
--c-comment--font-size-90	var(--font-size-90)	range	-	One step below base in the type scale.

Similar components

Anchormenu Segment Code