PricingFeature

A compact list item for included capabilities, limits and plan-specific details.

PricingFeature

View source · API reference

Plan features

Use the feature text to state the capability and its limit together.

  • Up to 5 example projects
  • Email support during business hours 
<ul class="pl-0">
  <PricingFeature tone="success">Up to 5 example projects</PricingFeature>
  <PricingFeature tone="info" icon="lucide:mail" variant="outline">
    Email support during business hours
  </PricingFeature>
</ul>

Explain a limitation

Keep the qualifier in text instead of relying on an icon.

  • Preview access. Features may change before release. 
<ul class="pl-0">
  <PricingFeature tone="warning">
    <span>
      <strong>Preview access.</strong>
      Features may change before release.
    </span>
  </PricingFeature>
</ul>

Behavior and accessibility

The root is an li. Use it inside a ul or inside PricingPlan’s default slot. Tone and variant style the icon frame; they do not change the wording or imply inclusion automatically.

API reference

PricingFeature 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
iconoir:check

Registered icon name for the feature.

tone

RefOrValue<SemanticTone>
Default
inherited

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

variant

RefOrValue<ComponentVariant>
Default
surface

Treatment of the small icon frame.

Composition

Default slot: feature content. Register definePricingComponents with Flex and Icon dependencies.