Layout

Limit card

A limit card displays the limit and usage of a resource. It includes a bar illustrating the usage against the limit.
View source
42
100
1
import {Limit} from '@coveord/plasma-react';
2


3
export default () => <Limit id="🥔" title="Limit example" usage={42} limit={100} />;

Props

NameTypeDefaultDescription
titlerequiredstring
The text displayed as the title of the Limit card
classNamestring
Additionnal CSS classes to customize the style of the Limit card
idstring
Unique identifier of the Limit card
isHistoryIncludedboolean
Whether the history icons is rendered
isLimitEditableboolean
Whether the limit value is editable directly in the Limit card
isLimitTheGoalToReachboolean
Whether the limit value is a goal. When the goal is achived, the progress bar stay teal color instead of turning red
limitnumber
Set the limit value of the Limit card. When the limit is reached, the progress bar is turning red color.
limitLabelstringLimit
The text displayed as the title of the limit value
onHistoryIconClick() => void
A callback function that gets executed after the History icon is clicked
usagenumber
Display the current usage under the Usage label

Examples

With goal to reach
100
100
1
import {Limit} from '@coveord/plasma-react';
2


3
export default () => <Limit id="❗" title="Limit example" usage={100} limit={100} isLimitTheGoalToReach />;
With History
82
100
1
import {Limit} from '@coveord/plasma-react';
2


3
export default () => (
4
    <Limit id="🐄" title="Hey" usage={82} isHistoryIncluded limit={100} onHistoryIconClick={() => alert('Patate!')} />
5
);
With custom value
42
130
1
import {Limit} from '@coveord/plasma-react';
2


3
export default () => <Limit id="👑" title="Patate King" usage={42} limit={130} limitLabel="Throttling limit" />;
With editable limit
57
1
import {Limit} from '@coveord/plasma-react';
2


3
export default () => <Limit id="💵" title="Supreme leader Snoke" usage={57} isLimitEditable limit={100} />;

No guidelines exist for Limit yet.

Create guidelines