# AccentBar

*Category:* Components
*Section:* Misc
*Source:* https://uikit.developers.rio.cloud/#/components/accentBar
*Captured:* 2026-04-27T14:58:14.383Z

The AccentBar component is a small, colored vertical bar (typically a few pixels wide) used to visually highlight or categorize rows in lists, tables, or cards. It helps improve readability by providing a quick visual cue for different statuses, categories, or priorities.

## AccentBar

Use it to indicate status or priority in a table, as a category marker in list-based layouts where items belong to different groups, or to subtly enhance visual hierarchy in a UI without overwhelming the content. Additionally, it can be used to describe values in a chart, acting as a color-coded reference for data representation.

### Example: Example 1

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.

#### React (tsx)

```tsx
import AccentBar from '@rio-cloud/rio-uikit/AccentBar';
import Card from '@rio-cloud/rio-uikit/Card';
import { dummyTextShort } from '../../../utils/data';

export default () => (
    <div className='display-flex flex-column gap-15 max-width-400'>
        <Card>
            <AccentBar>Lorem ipsum dolor sit amet</AccentBar>
        </Card>
        <Card>
            <AccentBar color='bg-info'>Lorem ipsum dolor sit amet</AccentBar>
        </Card>
        <Card>
            <AccentBar color='bg-warning'>{dummyTextShort}</AccentBar>
        </Card>
    </div>
);
```

#### HTML (html)

```html
<div class="display-flex flex-column gap-15 max-width-400">
    <div class="bg-white rounded border shadow-default padding-15">
        <div class="display-flex align-items-stretch">
            <div class="AccentBar bg-secondary">
            </div>Lorem ipsum dolor sit amet
        </div>
    </div>
    <div class="bg-white rounded border shadow-default padding-15">
        <div class="display-flex align-items-stretch">
            <div class="AccentBar bg-info">
            </div>Lorem ipsum dolor sit amet
        </div>
    </div>
    <div class="bg-white rounded border shadow-default padding-15">
        <div class="display-flex align-items-stretch">
            <div class="AccentBar bg-warning">
            </div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| color | string | 'bg-secondary' | Defines the color by setting it to a UIKIT bg-<name> class name. |
| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |
| className | string | — | Additional class names passed to the actual element. |

### Example: Example 2

Status Location ETA

In transit
Hamburg, DE 2024-02-02

Delivered
Rotterdam, NL 2024-01-29

Awaiting pickup
Warsaw, PL 2024-02-05

Customs clearance
Antwerp, BE 2024-02-03

#### React (tsx)

```tsx
import AccentBar from '@rio-cloud/rio-uikit/AccentBar';

const data = [
    { id: 1, status: 'In transit', location: 'Hamburg, DE', eta: '2024-02-02' },
    { id: 2, status: 'Delivered', location: 'Rotterdam, NL', eta: '2024-01-29' },
    { id: 3, status: 'Awaiting pickup', location: 'Warsaw, PL', eta: '2024-02-05' },
    { id: 4, status: 'Customs clearance', location: 'Antwerp, BE', eta: '2024-02-03' },
];

export default () => (
    <div className='table-responsive'>
        <table className='table'>
            <thead>
                <tr>
                    <th>Status</th>
                    <th>Location</th>
                    <th>ETA</th>
                </tr>
            </thead>
            <tbody>
                {data.map(row => (
                    <tr key={row.id}>
                        <td>
                            <AccentBar color={getStatusColor(row.status)}>{row.status}</AccentBar>
                        </td>
                        <td>{row.location}</td>
                        <td>{row.eta}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    </div>
);

const getStatusColor = (status: string) => {
    switch (status) {
        case 'In transit':
            return 'bg-warning';
        case 'Delivered':
            return 'bg-success';
        case 'Awaiting pickup':
            return 'bg-info';
        case 'Customs clearance':
            return 'bg-danger';
        default:
            return 'bg-primary';
    }
};
```

#### HTML (html)

```html
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>Status</th>
                <th>Location</th>
                <th>ETA</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="display-flex align-items-stretch">
                        <div class="AccentBar bg-warning">
                        </div>In transit
                    </div>
                </td>
                <td>Hamburg, DE</td>
                <td>2024-02-02</td>
            </tr>
            <tr>
                <td>
                    <div class="display-flex align-items-stretch">
                        <div class="AccentBar bg-success">
                        </div>Delivered
                    </div>
                </td>
                <td>Rotterdam, NL</td>
                <td>2024-01-29</td>
            </tr>
            <tr>
                <td>
                    <div class="display-flex align-items-stretch">
                        <div class="AccentBar bg-info">
                        </div>Awaiting pickup
                    </div>
                </td>
                <td>Warsaw, PL</td>
                <td>2024-02-05</td>
            </tr>
            <tr>
                <td>
                    <div class="display-flex align-items-stretch">
                        <div class="AccentBar bg-danger">
                        </div>Customs clearance
                    </div>
                </td>
                <td>Antwerp, BE</td>
                <td>2024-02-03</td>
            </tr>
        </tbody>
    </table>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| color | string | 'bg-secondary' | Defines the color by setting it to a UIKIT bg-<name> class name. |
| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |
| className | string | — | Additional class names passed to the actual element. |

### Example: Example 3

Visualizing rating distribution

Category Percentage

Poor 15%

Below Average 20%

Average 25%

Good 15%

Excellent 25%

#### React (tsx)

```tsx
import AccentBar from '@rio-cloud/rio-uikit/AccentBar';
import Card from '@rio-cloud/rio-uikit/Card';

const data = [
    { id: 1, status: 'In transit', location: 'Hamburg, DE', eta: '2024-02-02' },
    { id: 2, status: 'Delivered', location: 'Rotterdam, NL', eta: '2024-01-29' },
    { id: 3, status: 'Awaiting pickup', location: 'Warsaw, PL', eta: '2024-02-05' },
    { id: 4, status: 'Customs clearance', location: 'Antwerp, BE', eta: '2024-02-03' },
];

export default () => (
    <Card className='max-width-500 padding-25'>
        <div className='text-size-h5 text-medium text-color darker margin-bottom-25'>
            Visualizing rating distribution
        </div>
        <div className='margin-bottom-25'>
            <div className='progress'>
                <div className='progress-bar bg-rating-1 progress-divider' style={{ width: '15%' }} />
                <div className='progress-bar bg-rating-2 progress-divider' style={{ width: '20%' }} />
                <div className='progress-bar bg-rating-3 progress-divider' style={{ width: '25%' }} />
                <div className='progress-bar bg-rating-4 progress-divider' style={{ width: '15%' }} />
                <div className='progress-bar bg-rating-5 progress-divider' style={{ width: '25%' }} />
            </div>
        </div>

        <table className='table table-compact'>
            <thead>
                <tr>
                    <th className='width-10' />
                    <th>Category</th>
                    <th>Percentage</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td className='align-center width-5 padding-right-0'>
                        <AccentBar color='bg-rating-1' />
                    </td>
                    <td>Poor</td>
                    <td>15%</td>
                </tr>
                <tr>
                    <td className='align-center width-5 padding-right-0'>
                        <AccentBar color='bg-rating-2' />
                    </td>
                    <td>Below Average</td>
                    <td>20%</td>
                </tr>
                <tr>
                    <td className='align-center width-5 padding-right-0'>
                        <AccentBar color='bg-rating-3' />
                    </td>
                    <td>Average</td>
                    <td>25%</td>
                </tr>
                <tr>
                    <td className='align-center width-5 padding-right-0'>
                        <AccentBar color='bg-rating-4' />
                    </td>
                    <td>Good</td>
                    <td>15%</td>
                </tr>
                <tr>
                    <td className='align-center width-5 padding-right-0'>
                        <AccentBar color='bg-rating-5' />
                    </td>
                    <td>Excellent</td>
                    <td>25%</td>
                </tr>
            </tbody>
        </table>
    </Card>
);

const getStatusColor = (status: string) => {
    switch (status) {
        case 'In transit':
            return 'bg-warning';
        case 'Delivered':
            return 'bg-success';
        case 'Awaiting pickup':
            return 'bg-info';
        case 'Customs clearance':
            return 'bg-danger';
        default:
            return 'bg-primary';
    }
};
```

#### HTML (html)

```html
<div class="bg-white rounded border shadow-default padding-15 max-width-500 padding-25">
    <div class="text-size-h5 text-medium text-color darker margin-bottom-25">Visualizing rating distribution</div>
    <div class="margin-bottom-25">
        <div class="progress">
            <div class="progress-bar bg-rating-1 progress-divider" style="width: 15%;">
            </div>
            <div class="progress-bar bg-rating-2 progress-divider" style="width: 20%;">
            </div>
            <div class="progress-bar bg-rating-3 progress-divider" style="width: 25%;">
            </div>
            <div class="progress-bar bg-rating-4 progress-divider" style="width: 15%;">
            </div>
            <div class="progress-bar bg-rating-5 progress-divider" style="width: 25%;">
            </div>
        </div>
    </div>
    <table class="table table-compact">
        <thead>
            <tr>
                <th class="width-10">
                </th>
                <th>Category</th>
                <th>Percentage</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="align-center width-5 padding-right-0">
                    <div class="AccentBar bg-rating-1">
                    </div>
                </td>
                <td>Poor</td>
                <td>15%</td>
            </tr>
            <tr>
                <td class="align-center width-5 padding-right-0">
                    <div class="AccentBar bg-rating-2">
                    </div>
                </td>
                <td>Below Average</td>
                <td>20%</td>
            </tr>
            <tr>
                <td class="align-center width-5 padding-right-0">
                    <div class="AccentBar bg-rating-3">
                    </div>
                </td>
                <td>Average</td>
                <td>25%</td>
            </tr>
            <tr>
                <td class="align-center width-5 padding-right-0">
                    <div class="AccentBar bg-rating-4">
                    </div>
                </td>
                <td>Good</td>
                <td>15%</td>
            </tr>
            <tr>
                <td class="align-center width-5 padding-right-0">
                    <div class="AccentBar bg-rating-5">
                    </div>
                </td>
                <td>Excellent</td>
                <td>25%</td>
            </tr>
        </tbody>
    </table>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| color | string | 'bg-secondary' | Defines the color by setting it to a UIKIT bg-<name> class name. |
| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |
| className | string | — | Additional class names passed to the actual element. |

### Example: Example 4

Risk level Reason Suggested action

Low risk
Stable weather conditions Monitor

High risk
Labor strike at destination Reroute shipment

Critical risk
Customs hold & inspection Expedite clearance

#### React (tsx)

```tsx
import AccentBar from '@rio-cloud/rio-uikit/AccentBar';

const data = [
    { id: 1, riskLevel: 'Low risk', reason: 'Stable weather conditions', action: 'Monitor' },
    { id: 3, riskLevel: 'High risk', reason: 'Labor strike at destination', action: 'Reroute shipment' },
    { id: 4, riskLevel: 'Critical risk', reason: 'Customs hold & inspection', action: 'Expedite clearance' },
];

export default () => (
    <div className='table-responsive max-width-600'>
        <table className='table'>
            <thead>
                <tr>
                    <th>Risk level</th>
                    <th>Reason</th>
                    <th>Suggested action</th>
                </tr>
            </thead>
            <tbody>
                {data.map(row => (
                    <tr key={row.id}>
                        <td>
                            <AccentBar color={getRiskColor(row.riskLevel)} circle>
                                {row.riskLevel}
                            </AccentBar>
                        </td>
                        <td>{row.reason}</td>
                        <td>{row.action}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    </div>
);

const getRiskColor = (riskLevel: string) => {
    switch (riskLevel) {
        case 'Low risk':
            return 'bg-success';
        case 'High risk':
            return 'bg-warning';
        case 'Critical risk':
            return 'bg-danger';
        default:
            return 'bg-secondary';
    }
};
```

#### HTML (html)

```html
<div class="table-responsive max-width-600">
    <table class="table">
        <thead>
            <tr>
                <th>Risk level</th>
                <th>Reason</th>
                <th>Suggested action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="display-flex align-items-center">
                        <div class="AccentBar AccentBarCircle bg-success">
                        </div>Low risk
                    </div>
                </td>
                <td>Stable weather conditions</td>
                <td>Monitor</td>
            </tr>
            <tr>
                <td>
                    <div class="display-flex align-items-center">
                        <div class="AccentBar AccentBarCircle bg-warning">
                        </div>High risk
                    </div>
                </td>
                <td>Labor strike at destination</td>
                <td>Reroute shipment</td>
            </tr>
            <tr>
                <td>
                    <div class="display-flex align-items-center">
                        <div class="AccentBar AccentBarCircle bg-danger">
                        </div>Critical risk
                    </div>
                </td>
                <td>Customs hold &amp; inspection</td>
                <td>Expedite clearance</td>
            </tr>
        </tbody>
    </table>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| color | string | 'bg-secondary' | Defines the color by setting it to a UIKIT bg-<name> class name. |
| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |
| className | string | — | Additional class names passed to the actual element. |