desktop_windows
Web
phone_iphone
Mobile

COMPONENTS

Overview
AI
keyboard_arrow_down
Avatar
Avatar Group
Badge
Breadcrumb
Button
Calendar
Cards
Checkbox
Chips
Combobox
Date Pickers
Dividers
Dropdowns
Empty state
Help Text
Icon
Inline Editable Fields
Interactive Cards
Inputs
Key Value Pair
Link
Link Button
Listbox
Menu
Messages
Meta List
Modals
Navigation - Horizontal
Navigation - Vertical
Page Headers
Pagination
Pill
Popover
Progress Indicators
Radio
Rich Text Editor
Select
Sidesheet
Sliders
Status Hint
Stepper
Switch
Table
Tabs
Time Picker
Toast
Tooltip

Status Hint

Status hint is used to highlight the status of an item.

Usage
Code

As the name suggests, Status Hints can be used to highlight the status of a resource in tables, lists, headers, etc.

Appearance

Status hint comes in 5 Appearances -

Info

Warning

Success

Alert

Default

Structure



Structure of status hint
PropertyValue(s)
Spacing between Indicator and Label10 px
Size of indicator8x8 px

Configurations



PropertyValue(s)Default value
Appearance
  • Default
  • Info
  • Success
  • Warning
  • Alert
Default
Label<label>-

Usage


Status Hint vs Badge

Status hint is used to display the status of a resource while a badge is used as a label to tag entities.

Status hint vs Badge Status hint vs Badge



Was this page helpful?

CONTENTS