Note
Display text that requires attention or provides additional information.
General
Show a piece of text or components.
note:Check payment pending.
Types
You can apply a types differents with the type prop.
note:Check payment pending.
note:Check payment pending.
note:Check payment pending.
note:Check payment pending.
note:Check payment pending.
note:Check payment pending.
note:Check payment pending.
Hidden Label
Note component with a show/hide label.
Demo note!
Custom Label
You can change custom label of the Note with the property label.
custom:Customize a note.
Filled Variant
You can change the filled variant of the Note with the property filled.
custom:Customize a note.
primary:Check payment pending.
secondary:Check payment pending.
success:Check payment pending.
warning:Check payment pending.
error:Check payment pending.
note:Check payment pending.
APIs
Note.Props
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| type | note type | NoteTypes | NoteTypes | default |
| label | show label or custom text | boolean / string | - | - |
| filled | fill color | boolean | - | false |
| ... | native props | HTMLAttributes | 'id', 'className', ... | - |
NoteTypes
type NoteTypes =
| 'default'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| 'error'
| 'info'
Previous
Modal
Next
Page
MADE & DESIGNED WITHBY BRUNO ANDRADE
