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

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

No guidelines exist for Limit yet.

Create guidelines