ComparisonFeature

A list item with a compact icon, designed for clear and consistent comparison details.

ComparisonFeature

View source ยท API reference

A readable feature list

Every feature is an li, so place it inside a list.

  • Keyboard-operable controls
  • Email integration supplied by your application 
<ul class="pl-0">
  <ComparisonFeature tone="success">Keyboard-operable controls</ComparisonFeature>
  <ComparisonFeature tone="info" icon="lucide:mail">
    Email integration supplied by your application
  </ComparisonFeature>
</ul>

Rich supporting detail

The slot can contain more than a short string.

  • Own the source

    Every example includes the markup and TypeScript that powers it. 

<ul class="pl-0">
  <ComparisonFeature>
    <div>
      <strong>Own the source</strong>
      <p class="mb-0">
        Every example includes the markup and TypeScript that powers it.
      </p>
    </div>
  </ComparisonFeature>
</ul>

Behavior and accessibility

Use explicit text for included, limited or unavailable features. An icon color alone does not communicate availability to every reader.

API reference

ComparisonFeature contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

icon

RefOrValue<string>
Default
lucide:check

Registered icon name. The default check is decorative support for the feature text.

tone

RefOrValue<SemanticTone>
Default
inherited

Semantic intent: neutral, accent, secondary, info, success, warning, danger, feature, custom or ghost. The active skin supplies the colors.

Composition

Default slot: feature text or flow content. Root element is li. Register defineComparisonFeatureComponent with Flex and Icon dependencies.