TernaryStatus

The <TernaryStatus> component displays a positive, negative, or neutral status with an icon and label. It is designed for comparison tables and feature lists where you need to communicate yes / no / partial support at a glance.

Properties

Name
Default
Description
status
One of positive, negative, or neutral. Controls the default icon and color.
text
Yes/No
Defaults to "Yes" for positive and "No" for negative. Defaults to an empty string for neutral. Pass text="" to suppress the label entirely.
iconSize
20
Size of the default icon in pixels.
fontSize
CSS font-size value applied to the component (e.g. "14px").
color
Overrides the default color. Defaults are var(--green) for positive, var(--red) for negative, and var(--text) for neutral.
icon
Replaces the default icon. Pass false to hide the icon entirely.

Examples

Default statuses

<TernaryStatus status="positive" />
<TernaryStatus status="negative" />
<TernaryStatus status="neutral" text="Depends on host" />
Yes No Depends on host

Without icon

Set icon={false} to render text only — useful when you want a cleaner look or the icon adds no extra meaning in context.

<TernaryStatus status="positive" icon={false} />
<TernaryStatus status="negative" icon={false} />
<TernaryStatus status="neutral" text="Plugin required" icon={false} />
Yes No Plugin required

Custom text

<TernaryStatus status="positive" text="Included" />
<TernaryStatus status="negative" text="Not available" />
<TernaryStatus status="neutral" text="Plugin required" />
Included Not available Plugin required

Icon size & font size

<TernaryStatus status="positive" iconSize={16} fontSize="13px" />
<TernaryStatus status="positive" />
<TernaryStatus status="positive" iconSize={28} fontSize="18px" />
Yes Yes Yes

Custom color

<TernaryStatus status="positive" color="var(--accent)" />
<TernaryStatus status="negative" color="var(--orange)" text="Limited" />
<TernaryStatus status="neutral" text="Coming soon" color="var(--blue)" />
Yes Limited Coming soon

Custom icon

Use the icon snippet to replace the default icon entirely.

<TernaryStatus status="positive" text="Top pick">
    {#snippet icon()}
        <IconStarFill size={20} />
    {/snippet}
</TernaryStatus>

<TernaryStatus status="positive" text="Loved by users">
    {#snippet icon()}
        <IconHeartFill size={20} />
    {/snippet}
</TernaryStatus>
Top pick Loved by users