← Back to components list

StatusIcon

Displays a Tracker issue status icon. Each status type has its own icon and color. Unknown status values don't cause an error — the component displays an icon with a question mark.

Usage

import {StatusIcon} from '@weavix/tracker-components';

<StatusIcon statusType="new" />
<StatusIcon statusType="inProgress" />
<StatusIcon statusType="done" />

Supported statuses

new · inProgress · paused · done · cancelled · unknown · arbitrary string (displays with a question mark)

From Tracker API

Requires the "tracker:issues:read" permission in the plugin's manifest.json:

{
    "permissions": {
        "data": ["tracker:issues:read"]
    }
}

import {StatusIcon} from '@weavix/tracker-components';

const status = await trackerApi.v3.get['/issues/{id}/{field}']({
    pathParams: {
        id: 'ISSUEKEY-1',
        field: 'status',
    },
});

<StatusIcon
    statusType={status.data.key}
    title={status.data.display}
/>

Example — status next to the issue name

import {StatusIcon} from '@weavix/tracker-components';

export const IssueRow = ({issue}: {issue: {statusType: string; summary: string}}) => (
    <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
        <StatusIcon statusType={issue.statusType} size={16} />
        <span>{issue.summary}</span>
    </div>
);

Props

Prop Type Default Description
statusType string — Issue status type. Supported values are listed above
size number 16 Icon size in pixels
title string — Human-readable status name for screen readers. If not provided, the icon is marked as decorative (aria-hidden)
className string — Additional CSS class for the icon
containerClassName string — Additional CSS class for the outer container
Previous
PriorityIcon
Next
Working with the Yandex Tracker API