👩‍💻
Builder Portal
  • Sovryn Builder Portal
    • Contribution
  • Design System
    • Design principles
    • Structure
    • Usage by Sovryn
  • UI Library
    • Overview
    • Getting Started
    • Atoms
      • Accordion
      • Badge
      • HealthBar
      • Button
      • DynamicValue
      • Heading
      • ErrorBadge
      • Icon
      • Input
      • Lottie
      • Paragraph
      • Toggle
      • Link
      • Checkbox
    • Molecules
      • AmountInput
      • ContextLink
      • Dialog
      • Dropdown
      • ErrorList
      • Footer
      • FormGroup
      • Header
      • HelperButton
      • Menu
      • NavMenuItem
      • Notification
      • Overlay
      • Pagination
      • RadioButton
      • RadioButtonGroup
      • Select
      • SimpleTable
      • StatusItem
      • Table
      • TableBase
      • Tabs
      • Tooltip
      • TransactionId
      • VerticalTabs
      • VerticalTabsMobile
      • WalletContainer
      • WalletIdentity
    • Working with Components
    • Links
    • Contribution
  • Sovryn SDK
    • Smart Router
      • Creating a New Swap Route
      • Available routes
        • AMM
        • MoC integration
        • MYNT bAsset
        • MYNT fixed rate
    • Sovryn Onboard
      • Installation
      • Usage
      • Custom Connectors
      • Custom UI
      • Contribution
    • The Graph
      • Overview
      • Usage
      • Sovryn Subgraphs
      • Advanced Usage
  • sovryn.app
    • Overview
    • Sovryn UI Library Usage
    • The Graph Usage
    • Links
    • Contribution
    • Dapp specific components
      • MaxButton
  • Smart Contracts
    • Overview
    • AMM
      • Liquidity
        • V1 Converters
        • V2 Converters
      • Conversion
      • Wrapper
        • V1 liquidity
        • V2 liquidity
        • Swaps
    • Sovryn Protocol
      • Lending
        • Mint
        • Burn
      • Borrowing
        • Borrow
        • Repay
      • Margin Trading
        • Open
        • Close
      • Collateral Management
    • Liquidity Mining
      • Deposit
      • Withdraw
      • Rewards
    • FastBTC
      • RSK->BTC
    • Bitocracy
      • Staking
      • Governor
      • Fee Sharing
      • Vesting
    • Zero
      • Borrower operations
      • Trove Manager
      • Satability Pool
      • Rewards
    • Mynt & DLLR
      • Basset to Masset Conversion
      • Masset to Basset Conversion
      • MOC Integration Conversion
Powered by GitBook
On this page
  • Description
  • Figma
  • Usage Examples (Storybook)
  1. UI Library
  2. Atoms

HealthBar

PreviousBadgeNextButton

Last updated 1 year ago

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

Usage Examples (Storybook)

LogoWebpack App
Not found