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'
type is only a color, which a screen reader does not announce. Keep the label as the word that carries the meaning, such as label="error", and avoid label={false} when the type matters.