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-component="comment">
  <div class="c-comment__col">
    <!-- avatar.blade.php -->
    <div class="c-avatar c-avatar--size-md" data-component="avatar">
      <span class="c-avatar__icon" aria-label="Peter Svensson"><!-- icon.blade.php -->
       </span>
    </div>
  </div>
  <div class="c-comment__col">
    <div class="c-comment__top">
      <a class="c-link c-comment__link" href="#" target="_top" data-component="link"><!-- typography.blade.php   original: h6 -->
      <h2 class="c-typography c-comment__author c-typography__variant--h2" data-component="typography">
        Peter Svensson
      </h2></a> <!-- typography.blade.php   original: span -->
       <span class="c-typography c-comment__date c-typography__variant--meta" data-component="typography"><time class="c-date" data-date="2024-03-18T07:55:29" datetime="2024-03-18T07:55:29"
      data-tooltip="Mon 18 Mar 2024" 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-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-component="button"><span class="c-button__label"><span class=
      "c-button__label-icon"><!-- icon.blade.php --></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-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class=
      "c-button__label-text">Like</span></span></a>
    </div>
  </div>
</div>
<div class="c-comment c-comment__is-reply" data-component="comment">
  <div class="c-comment__col">
    <!-- avatar.blade.php -->
    <div class="c-avatar c-avatar--size-md" data-component="avatar">
      <!-- image.blade.php -->
      <figure class="c-image c-avatar__image c-image--cover" aria-label="Peter Olsson" data-component="image">
        <div class="c-image__image-wrapper">
          <img class="c-image__image" src="https://picsum.photos/id/338/70/70" alt="Peter Olsson" loading="lazy" />
        </div>
      </figure>
    </div>
  </div>
  <div class="c-comment__col">
    <div class="c-comment__top">
      <div class="c-link c-comment__link" data-component="link">
        <!-- typography.blade.php   original: h6 -->
        <h3 class="c-typography c-comment__author c-typography__variant--h3" data-component="typography">
          Peter Olsson
        </h3>
      </div><!-- typography.blade.php   original: span -->
       <span class="c-typography c-comment__date c-typography__variant--meta" data-component="typography"><time class="c-date" data-date="2025-08-16T13:05:49" datetime="2025-08-16T13:05:49"
      data-tooltip="Sat 16 Aug 2025" 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-component="typography">
        This is a reply comment text
      </p>
    </div>
  </div>
</div>
<div class="c-comment c-comment__is-reply" data-component="comment">
  <div class="c-comment__col">
    <!-- avatar.blade.php -->
    <div class="c-avatar c-avatar--size-md" data-component="avatar">
      <!-- image.blade.php -->
      <figure class="c-image c-avatar__image c-image--cover" aria-label="Peter Olsson" data-component="image">
        <div class="c-image__image-wrapper">
          <img class="c-image__image" src="https://picsum.photos/id/342/70/70" alt="Peter Olsson" loading="lazy" />
        </div>
      </figure>
    </div>
  </div>
  <div class="c-comment__col">
    <div class="c-comment__top">
      <div class="c-link c-comment__link" data-component="link">
        <!-- typography.blade.php   original: h6 -->
        <h4 class="c-typography c-comment__author c-typography__variant--h4" data-component="typography">
          Peter Olsson
        </h4>
      </div><!-- typography.blade.php   original: span -->
       <span class="c-typography c-comment__date c-typography__variant--meta" data-component="typography"><time class="c-date" data-date="2026-09-21T13:05:49" datetime="2026-09-21T13:05:49"
      data-tooltip="Mon 21 Sep 2026" 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-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-component="comment">
  <div class="c-comment__col">
    <!-- avatar.blade.php -->
    <div class="c-avatar c-avatar--size-md" data-component="avatar">
      <!-- image.blade.php -->
      <figure class="c-image c-avatar__image c-image--cover" aria-label="Peter Olsson" data-component="image">
        <div class="c-image__image-wrapper">
          <img class="c-image__image" src="https://picsum.photos/id/342/70/70" alt="Peter Olsson" loading="lazy" />
        </div>
      </figure>
    </div>
  </div>
  <div class="c-comment__col">
    <div class="c-comment__top">
      <div class="c-link c-comment__link" data-component="link">
        <!-- typography.blade.php   original: h6 -->
        <h5 class="c-typography c-comment__author c-typography__variant--h5" data-component="typography">
          Peter Olsson
        </h5>
      </div><!-- typography.blade.php   original: span -->
       <span class="c-typography c-comment__date c-typography__variant--meta" data-component="typography"><time class="c-date" data-date="2026-09-21T13:03:49" datetime="2026-09-21T13:03:49"
      data-tooltip="Mon 21 Sep 2026" 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-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-component="comment">
  <div class="c-comment__col">
    <!-- avatar.blade.php -->
    <div class="c-avatar c-avatar--size-md" data-component="avatar">
      <!-- image.blade.php -->
      <figure class="c-image c-avatar__image c-image--cover" aria-label="Peter Olsson" data-component="image">
        <div class="c-image__image-wrapper">
          <img class="c-image__image" src="https://picsum.photos/id/64/70/70" alt="Peter Olsson" loading="lazy" />
        </div>
      </figure>
    </div>
  </div>
  <div class="c-comment__col">
    <div class="c-comment__top">
      <div class="c-link c-comment__link" data-component="link">
        <!-- typography.blade.php   original: h6 -->
        <h6 class="c-typography c-comment__author c-typography__variant--h6" data-component="typography">
          Peter Olsson
        </h6>
      </div><!-- typography.blade.php   original: span -->
       <span class="c-typography c-comment__date c-typography__variant--meta" data-component="typography"><time class="c-date" data-date="2026-09-21T08:05:49" datetime="2026-09-21T08:05:49"
      data-tooltip="Mon 21 Sep 2026" 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-component="typography">
        This is a reply comment text, it was written five hours ago.
      </p>
    </div>
  </div>
</div>
<div class="c-comment" data-component="comment">
  <div class="c-comment__col">
    <!-- avatar.blade.php -->
    <div class="c-avatar c-avatar--size-md" 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-component="link">
        <!-- typography.blade.php   original: h6 -->
        <h6 class="c-typography c-comment__author c-typography__variant--h6" data-component="typography">
          Peter Svensson
        </h6>
      </div><!-- typography.blade.php   original: span -->
       <span class="c-typography c-comment__date c-typography__variant--meta" data-component="typography"><time class="c-date" data-date="2025-09-21T13:05:49" datetime="2025-09-21T13:05:49"
      data-tooltip="Sun 21 Sep 2025" 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	Type	Description
author		string	-
author_url		string	-
author_image		string	-
text		string	-
icon		string	-
bubble_color	dark	string	-
date	01/02/2019	string	-
date_suffix	ago	string	-
dateLabels	[]	array	-
dateLabelsPlural	[]	array	-
componentElement	div	string	-
is_reply	false	boolean	-
filterHtml	false	boolean	-
allowedTags		string	-
actions	false	object\|boolean	-

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