> For the complete documentation index, see [llms.txt](https://build.sovryn.com/builder-portal/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://build.sovryn.com/builder-portal/ui-library/atoms/healthbar.md).

# HealthBar

## Description

The HealthBar component is an indicator of the user's collateral ratio. It has 2 states: the default state that shows the current collateral ratio, and the dynamic state that shows what the collateral ratio will be based on an adjustment to the debt or collateral input fields.

## Figma

{% @figma/embed fileId="Ig2ZfR16Svs8In7yibukrO" nodeId="9789:2556" url="<https://www.figma.com/file/Ig2ZfR16Svs8In7yibukrO/Sovryn-UI-Library?node-id=9789:2556&t=ndNzYajZzm5F0IEt-1&type=design>" %}

## Usage Examples (Storybook)

{% embed url="<https://main--64805a328deba43ac7b6d3c1.chromatic.com/iframe.html?args=&id=atoms-healthbar--default&viewMode=docs>" %}