Status Indicator
This component is used to render current status of the parent component.
Example
<> <Switch size="medium" aria-label="Medium switch" /> <StatusIndicator kind="positive" aria-label="Saved" /> </>
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.
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> ); }
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!' }
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> ); }
Kind
We have three kinds of status, i.e., progress, positive, warning and negative. StatusIndicator requires 'kind' to render component.
<StatusIndicator kind="progress" withLabel />
<StatusIndicator kind="positive" withLabel />
<StatusIndicator kind="warning" withLabel />
<StatusIndicator kind="negative" withLabel />
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!' }
<> <Switch size="medium" aria-label="Medium switch" /> <StatusIndicator kind="positive" withLabel /> </>
Working example with component and labels.
To hide the tooltip leave the label variant empty!
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> ); }
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. |
| — |
withLabel This prop enables the display of a label next the status indicator. If no custom label is passed, it uses the default labels. |
| — |
customLabels The prop for status indicator with custom labels with StatusIndicatorLabelTypes, if not passed uses default props that can be exported from StatusIndicator component. |
| "{
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. |
| false |
aria-label Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link |
| — |
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence |
| — |
* - the prop is required. |