Ring

The Ring component displays progress or status using a radial indicator. It supports custom labels, color stops, neutral states, and fully customized center content.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽³⁾

Properties

⁽⁴¹⁾

Playground

Interactive Presets

Drive multiple ring presentations from a single stateful value and expose how sizing and labels adapt.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Button
,
 
Ring
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 
useState
(
72
)
;
 
  
return
 
(
    
<Block
 
align
=
"center"
 
gap
=
"md"
>
      
<Row
 
gap
=
"lg"
 
align
=
"center"
>
        
<Ring
 
value
=
{
value
}
 
caption
=
"Completion"
 
/>
        
<Ring
 
value
=
{
value
}
 
size
=
{
72
}
 
thickness
=
{
8
}
 
caption
=
"Compact"
 
/>
      
</Row
>
      
<Row
 
gap
=
"sm"
>
        
<Button
 
variant
=
"outline"
 
onPress
=
{
(
)
 
=>
 
setValue
(
Math
.
max
(
0
,
 value 
-
 
10
)
)
}
>
          
-
10
%
        
</Button
>
        
<Button
 
onPress
=
{
(
)
 
=>
 
setValue
(
Math
.
min
(
100
,
 value 
+
 
10
)
)
}
>+
10
%
</Button
>
      
</Row
>
    
</Block
>
  
)
;
}

Dynamic Color Stops

Display how colorStops shift the progress color as values cross threshold ranges.

Loading demo…

import
 
{
 
Ring
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 colorStops 
=
 
[
  
{
 value
:
 
0
,
 color
:
 
'#f87171'
 
}
,
  
{
 value
:
 
60
,
 color
:
 
'#f59e0b'
 
}
,
  
{
 value
:
 
90
,
 color
:
 
'#14b8a6'
 
}
,
]
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
gap
=
"lg"
 
justify
=
"center"
 
wrap
=
"wrap"
>
      
{
[
48
,
 
72
,
 
97
]
.
map
(
(
value
)
 
=>
 
(
        
<Ring
 
key
=
{
value
}
 
value
=
{
value
}
 
colorStops
=
{
colorStops
}
 
caption
=
{
`${value}%`
}
 
/>
      
)
)
}
    
</Row
>
  
)
;
}

Custom Center Content

Showcase the render-prop API for injecting icons, text, or status badges inside the ring.

Loading demo…

import
 
{
 
Block
,
 
Icon
,
 
Ring
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
gap
=
"lg"
 
justify
=
"center"
 
wrap
=
"wrap"
>
      
<Ring
 
value
=
{
86
}
 
caption
=
"Pipeline"
>
        
{
(
{
 percent 
}
)
 
=>
 
(
          
<Block
 
align
=
"center"
>
            
<Icon
 
name
=
"rocket"
 
size
=
"lg"
 
color
=
"primary"
 
/>
            
<Text
 
weight
=
"700"
>
{
Math
.
round
(
percent
)
}
%
</Text
>
          
</Block
>
        
)
}
      
</Ring
>
 
      
<Ring
 
value
=
{
0
}
 neutral 
caption
=
"Design system"
>
        
<Block
 
align
=
"center"
>
          
<Icon
 
name
=
"clock"
 
size
=
"lg"
 
color
=
"gray"
 
/>
          
<Text
 
size
=
"xs"
 
color
=
"secondary"
>
            
On
 hold
          
</Text
>
        
</Block
>
      
</Ring
>
    
</Row
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Ring

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap