Component API

Progress Bar

A progress bar can be used to show a user how far along they are in a process. Progress bars are used within the Loading Indicator component.

Basic Usage

25%

import React from 'react';
import { ProgressBar } from 'react-magma-dom';

export function Example() {
  return <ProgressBar percentage={25} />;
}

Percentage

The percentage prop is used to display how much of the bar should be filled in. The default value is 0. This value can be adjusted dynamically.

import React from 'react';
import { ProgressBar, Button, Paragraph } from 'react-magma-dom';

export function Example() {
  const [percentage, setPercentage] = React.useState(0);

  function handleIncrease() {
    setPercentage(percent => percent + 10);
  }

  function handleDecrease() {
    setPercentage(percent => percent - 10);
  }

  return (
    <>
      <ProgressBar percentage={percentage} />
      <Paragraph>
        <Button disabled={percentage >= 100} onClick={handleIncrease}>
          Increase
        </Button>
        <Button disabled={percentage <= 0} onClick={handleDecrease}>
          Decrease
        </Button>
      </Paragraph>
    </>
  );
}

Animated

50%

import React from 'react';
import { ProgressBar } from 'react-magma-dom';

export function Example() {
  return <ProgressBar isAnimated percentage={50} />;
}

Background Color

The color prop can be used to set the background color of the progress bar. This prop takes the following values: primary and danger, and success. The default value is primary which renders as #006298, or magma.colors.primary.

25%

import React from 'react';
import { ProgressBar, ProgressBarColor } from 'react-magma-dom';

export function Example() {
  return (
    <>
      <ProgressBar color={ProgressBarColor.primary} percentage={25} />
      <br />
      <ProgressBar color={ProgressBarColor.danger} percentage={25} />
      <br />
      <ProgressBar color={ProgressBarColor.success} percentage={25} />
      <br />
    </>
  );
}

Height

The height prop can be used to set the height of the progress bar. Can be a string or a number; if a number is provided the height will be in pixels.

The default value is '8px'.

25%

import React from 'react';
import { ProgressBar } from 'react-magma-dom';

export function Example() {
  return (
    <>
      <ProgressBar height={10} percentage={25} />
      <br />
      <ProgressBar height="2em" percentage={25} />
    </>
  );
}

Inverse

isInverse is an optional boolean prop, that may be passed in when the component is to be displayed on a dark background. When the isInverse prop is used, the default background color of the progress bar is #00A9E0 or magma.colors.foundation03.

25%

import React from 'react';
import { ProgressBar, Card, CardBody } from 'react-magma-dom';

export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <ProgressBar isInverse percentage={25} />
      </CardBody>
    </Card>
  );
}

Label Visible

If the isLabelVisible prop is true, the percentage value will display to the right of the progress bar.

25%

import React from 'react';
import { ProgressBar } from 'react-magma-dom';

export function Example() {
  return <ProgressBar isLabelVisible percentage={25} />;
}

Progress Bar Props

This component uses forwardRef. The ref is applied to the outer div element.

All of the global HTML attributes can be provided as props and will be applied to the wrapping div element that gets rendered.

= required prop

Property	Type	Default	Description
color	enum, one of: `ProgressBarColor.danger` `ProgressBarColor.pop` `ProgressBarColor.pop02` `ProgressBarColor.primary` `ProgressBarColor.success`	ProgressBarColor.primary	The color variant of the progress bar
height	number \| string	8	The height of the progress bar. Can be a string or number; if number is provided height is in px
isAnimated	boolean	false	If true, the progress bar with have a shimmer animation
isInverse	boolean	false	If true, the component will have inverse styling to better appear on a dark background
isLabelVisible	boolean	false	If true, the label with the percentage value will display to the right of the progress bar
percentage	number	0	The percentage of which the bar is filled
testId	string	-	Test ID attached to an internal element as `data-testid` for consumer testing