Import
import { Banner } from "@sugarcoat/ui-nxt";Usage
<Banner>Important announcement message</Banner>Examples#
Basic Banner#
Default Banner
Sizes#
The Banner component supports three sizes: sm, md (default), and lg.
Small Banner
Medium Banner
Large Banner
Colors#
Banner supports a wide range of color variants for different contexts.
Default Color
Primary Color
Accent Color
Red Color
Green Color
Blue Color
Orange Color
Border Styles#
Control the border appearance with the border prop.
Solid Border
Dashed Border
No Border
Shadow#
Add depth with the shadow prop.
No Shadow
Small Shadow
Medium Shadow
Large Shadow
Combined Variants#
Styled Banner
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | The size of the banner |
| color | "default" | "inverse" | "neutral" | "primary" | "accent" | "red" | "green" | "blue" | ... | "default" | The color variant of the banner |
| border | "solid" | "dashed" | "none" | "solid" | The border style of the banner |
| shadow | "none" | "sm" | "md" | "lg" | "sm" | The shadow depth of the banner |
| children | ReactNode | - | The content to display inside the banner |