desktop_windows
Web
phone_iphone
Mobile

COMPONENTS

Overview
AI
keyboard_arrow_down
Avatar
Avatar Group
Badge
Breadcrumb
Button
Calendar
Cards
Chat
keyboard_arrow_down
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
Meter
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

Sizes

Status hint comes in 2 sizes - regular and small.

Sizes in status hint Sizes in status hint

Structure



Structure of status hint
PropertyValue(s)
Label Size
  • 14px (Regular)
  • 12px (Small)
Spacing between Indicator and Label
  • 8px (Regular)
  • 6px (Small)
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


Overflow Behavior in Status Hint

In case of overflow, the items will get truncated and can be viewed inside a tooltip on hover.


Was this page helpful?

CONTENTS