Status Indicator

This component is used to render current status of the parent component.

Example

Live Editor

<> <Switch size="medium" aria-label="Medium switch" /> <StatusIndicator kind="positive" aria-label="Saved" /> </>

<>
  <Switch size="medium" aria-label="Medium switch" />
  <StatusIndicator kind="positive" aria-label="Saved" />
</>

Result

Loading...

Variants

Custom Labels

We can use customLabels props which needs to match the StatusIndicatorLabelTypes to show custom lables, when no custom labels are passed, default props are used.

Live Editor

function customLabeledStatusIndicator() { const customLabels = { progress: 'Updating data...', positive: 'Successfully Updated!', warning: 'Not Updated!', negative: 'Failed! Please try again Later' }; return ( <div> <Switch size="medium" aria-label="Medium switch" /> <StatusIndicator kind="positive" withLabel customLabels={customLabels} /> </div> ); }

function customLabeledStatusIndicator() {
  const customLabels = {
    progress: 'Updating data...',
    positive: 'Successfully Updated!',
    warning: 'Not Updated!',
    negative: 'Failed! Please try again Later'
  };

  return (
    <div>
      <Switch size="medium" aria-label="Medium switch" />
      <StatusIndicator kind="positive" withLabel customLabels={customLabels} />
    </div>
  );
}

Result

Loading...

Disabled Tooltip

isTooltipDisabled is an optional prop that makes the tooltip disabled if the user wants to show only the provided label. The default value of the prop is false.

defaultLabels: {
    progress: 'Saving…',
    positive: 'Saved!',
    warning: 'Not Saved!',
    negative: 'Disconnected!'
}

Live Editor

function customLabeledStatusIndicator() { const customLabels = { progress: 'Updating data...', positive: 'Successfully Updated!', warning: 'Not Updated!', negative: 'Failed! Please try again Later' }; return ( <div> <StatusIndicator kind="positive" withLabel isTooltipDisabled /> <StatusIndicator kind="positive" withLabel customLabels={customLabels} isTooltipDisabled /> </div> ); }

function customLabeledStatusIndicator() {
  const customLabels = {
    progress: 'Updating data...',
    positive: 'Successfully Updated!',
    warning: 'Not Updated!',
    negative: 'Failed! Please try again Later'
  };

  return (
    <div>
      <StatusIndicator kind="positive" withLabel isTooltipDisabled />
      <StatusIndicator kind="positive" withLabel customLabels={customLabels} isTooltipDisabled />
    </div>
  );
}

Result

Loading...

Kind

We have three kinds of status, i.e., progress, positive, warning and negative. StatusIndicator requires 'kind' to render component.

Live Editor

<StatusIndicator kind="progress" withLabel />

<StatusIndicator kind="progress" withLabel />

Result

Loading...

Live Editor

<StatusIndicator kind="positive" withLabel />

<StatusIndicator kind="positive" withLabel />

Result

Loading...

Live Editor

<StatusIndicator kind="warning" withLabel />

<StatusIndicator kind="warning" withLabel />

Result

Loading...

Live Editor

<StatusIndicator kind="negative" withLabel />

<StatusIndicator kind="negative" withLabel />

Result

Loading...

Label

StatusIndicator has a withLabel prop for showing label, here you can see defautlLabels for indicatorType. If the StatusIndicator is not using withLabel, make sure you are passing aria-label to the component.

defaultLabels: {
    progress: 'Saving…',
    positive: 'Saved!',
    warning: 'Not Saved!',
    negative: 'Disconnected!'
}

Live Editor

<> <Switch size="medium" aria-label="Medium switch" /> <StatusIndicator kind="positive" withLabel /> </>

<>
  <Switch size="medium" aria-label="Medium switch" />
  <StatusIndicator kind="positive" withLabel />
</>

Result

Loading...

Working example with component and labels.

To hide the tooltip leave the label variant empty!

Live Editor

function customLabeledStatusIndicator() { const customLabels = { progress: 'Updating...', positive: '', warning: 'Not Updated!', negative: 'Failed!' }; const [enable, setEnable] = useState(false); const [status, setStatus] = useState('positive'); const updateEnable = (e) => { setStatus('progress'); setTimeout(() => { setEnable(!enable); setStatus('positive'); }, 500); }; return ( <div> <Switch size="medium" checked={enable} onChange={updateEnable} aria-label="Medium switch" /> <StatusIndicator kind={status} withLabel customLabels={customLabels} /> </div> ); }

function customLabeledStatusIndicator() {
  const customLabels = {
    progress: 'Updating...',
    positive: '',
    warning: 'Not Updated!',
    negative: 'Failed!'
  };

  const [enable, setEnable] = useState(false);
  const [status, setStatus] = useState('positive');

  const updateEnable = (e) => {
    setStatus('progress');
    setTimeout(() => {
      setEnable(!enable);
      setStatus('positive');
    }, 500);
  };

  return (
    <div>
      <Switch
        size="medium"
        checked={enable}
        onChange={updateEnable}
        aria-label="Medium switch"
      />
      <StatusIndicator kind={status} withLabel customLabels={customLabels} />
    </div>
  );
}

Result

Loading...

Props

Name	Type	Default
kind * The prop for kind which is required to enable the indicator and shows the status based on its given type without label.	"negative" | "positive" | "warning" | "progress"	—
withLabel This prop enables the display of a label next the status indicator. If no custom label is passed, it uses the default labels.	boolean	—
customLabels The prop for status indicator with custom labels with StatusIndicatorLabelTypes, if not passed uses default props that can be exported from StatusIndicator component.	StatusIndicatorLabelTypes	"{ positive: 'Saved!', warning: 'Not Saved!', negative: 'Disconnected!', progress: 'Saving…' }"
isTooltipDisabled The prop turns off the tooltip in case the user wants to show a label without a tooltip.	boolean	false
aria-label Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link	string	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.