47 lines
1.6 KiB
Plaintext
47 lines
1.6 KiB
Plaintext
---
|
|
title: Note
|
|
description: This section previews the Note component.
|
|
date: 14-12-2024
|
|
---
|
|
|
|
The `Note` component allows you to display different types of messages such as general notes, warnings, or success notifications. Each type is styled accordingly, providing a clear visual cue to the user.
|
|
|
|
## Preview
|
|
|
|
<Note type="note" title="Note">
|
|
This is a general note to convey information to the user.
|
|
</Note>
|
|
<Note type="danger" title="Danger">
|
|
This is a danger alert to notify the user of a critical issue.
|
|
</Note>
|
|
<Note type="warning" title="Warning">
|
|
This is a warning alert for issues that require attention.
|
|
</Note>
|
|
<Note type="success" title="Success">
|
|
This is a success message to inform the user of successful actions.
|
|
</Note>
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
| ------- | ---------------------------------------------- | ------- | ---------------------------------------- |
|
|
| `title` | `string` | "Note" | Sets the title of the note. |
|
|
| `type` | `"note"`, `"danger"`, `"warning"`, `"success"` | "note" | Determines the visual style of the note. |
|
|
|
|
## Code
|
|
|
|
```jsx
|
|
<Note type="note" title="Note">
|
|
This is a general note to convey information to the user.
|
|
</Note>
|
|
<Note type="danger" title="Danger">
|
|
This is a danger alert to notify the user of a critical issue.
|
|
</Note>
|
|
<Note type="warning" title="Warning">
|
|
This is a warning alert for issues that require attention.
|
|
</Note>
|
|
<Note type="success" title="Success">
|
|
This is a success message to inform the user of successful actions.
|
|
</Note>
|
|
```
|