Display text that requires attention or provides additional information.
Show a piece of text or components.
You can apply a types differents with the type prop.
Note component with a show/hide label.
You can change custom label of the Note with the property label.
You can change the filled variant of the Note with the property filled.
Say what happened in the label and what to do in the text. Use the type that matches how urgent it is.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| type | note type | NoteTypes | NoteTypes | default |
| label | show label or custom text | boolean / string | - | - |
| filled | filled variant: fill color | boolean | - | false |
| light | light variant: tinted background | boolean | - | false |
| subtle | subtle variant: no border | boolean | - | false |
| ... | native props | HTMLAttributes | 'id', 'className', ... | - |
type NoteTypes =
| 'default'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| 'error'
| 'info'