mirror of
https://github.com/Kong/insomnia.git
synced 2026-04-18 13:18:59 -04:00
e43bd82620
* feat: form component * feat: use twMerge to support class overide * Spike: Add markdown format doc support for base-components (#9368) * initial check-in * add things * update select.mdx * use react live things * add package-json * Revert "add package-json" This reverts commit c57abf6178f39e631ec7fe6634cb4e6afd950fdb. * update comment * update docs * type fix * tailwind v4 upgrade * upgrade tailwind v4 in docusaurus * feat: add more components (#9426) * update * update --------- Co-authored-by: Kent Wang <kent.wang@konghq.com>
48 lines
1.1 KiB
Plaintext
48 lines
1.1 KiB
Plaintext
---
|
|
id: banner
|
|
sidebar_label: 'Banner'
|
|
sidebar_position: 1
|
|
---
|
|
|
|
# Banner
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Required | Description |
|
|
| --------- | --------------------- | -------- | ----------------------------- |
|
|
| `type` | `'info' \| 'warning'` | Yes | Type of banner to display |
|
|
| `message` | `React.ReactNode` | Yes | Message content to display |
|
|
| `title` | `string` | No | Optional title for the banner |
|
|
|
|
## Usage Examples
|
|
|
|
### Info
|
|
|
|
```tsx live
|
|
<Banner type="info" title="info title" message="This is an info banner." />
|
|
```
|
|
|
|
### Info without title
|
|
|
|
```tsx live
|
|
<Banner type="info" message="This is an info banner." />
|
|
```
|
|
|
|
### Warning
|
|
|
|
```tsx live
|
|
<Banner type="warning" title="warnning title" message="This is an warnning banner." />
|
|
```
|
|
|
|
## Styling
|
|
|
|
### CSS Variables
|
|
|
|
The component uses the following CSS variables for theming:
|
|
|
|
- `--color-font`: Banner text color
|
|
- `--color-surprise`: Info banner background
|
|
- `--color-warning`: Warning banner background
|
|
|
|
You can customize these variables in your CSS to theme the banner appearance.
|