- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
A component to highlight important text on the screen. It supports multiple mood variants and can include an optional icon to enhance the visual hierarchy.
Basic Usage
A simple hint without an icon:
This is a default hint message that provides helpful information to users.
With Icon
Add an icon to make the hint more visually prominent:
This hint includes an icon to draw attention to important information.
All Variants
The Hint component supports five mood variants: default, neutral, success, warning, and danger.
Default: General information and helpful tips.
Neutral: Standard informational messages.
Success: Positive outcomes and confirmations.
Warning: Important information requiring attention.
Danger: Errors or critical information.
Without Icons
Hints can also be displayed without icons for a cleaner look:
This is a simple hint without an icon for cleaner layouts.
Changes saved successfully.
Your session will expire soon.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "neutral" | "success" | "warning" | "danger" | "default" | The mood variant of the hint |
icon | React.ReactNode | undefined | Optional icon to display at the start of the hint |
className | string | undefined | Additional CSS classes to apply |
children | React.ReactNode | - | The content to display in the hint |
The component also accepts all standard HTML div attributes.