Progress

Progress shows how far along something is. The value goes from min to max, 0 to 100 by default.

import { Progress } from '@beyul/sulmu-ui'

Source · Figma

Examples

Label and value

Administrative

Storage used72%

import { Progress, Stack } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Stack style={{ maxWidth: 320 }}>
      <Progress label="Administrative" value={40} />
      <Progress label="Storage used" value={72} showValue />
      <Progress aria-label="Upload" value={15} />
    </Stack>
  )
}

Tones

brand

brandMuted

success

warning

danger

import { Progress, Stack } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Stack style={{ maxWidth: 320 }}>
      <Progress label="brand" value={20} tone="brand" />
      <Progress label="brandMuted" value={38} tone="brandMuted" />
      <Progress label="success" value={56} tone="success" />
      <Progress label="warning" value={74} tone="warning" />
      <Progress label="danger" value={92} tone="danger" />
    </Stack>
  )
}

Props

Prop	Type	Default	Description
label	ReactNode	-	Text above the bar. Without it, pass aria-label.
showValue	boolean	-	Show the value on the right of the label.
tone	"brand" | "brandMuted" | "success" | "warning" | "danger"	-
value	number | null	-	The controlled value of the progress bar.
max	number	-	The maximum allowed value of the progress bar.
min	number	-	The minimum allowed value of the progress bar.

The remaining props of Ark UI’s Progress.Root are accepted too.

Accessibility

• label names the bar. Without a label, pass aria-label.
• The bar has role="progressbar" with the current, minimum and maximum values.