Banner
A versatile component designed to display important information in a prominent and visually appealing way, offering a range of customization options for various use cases.
Installation
npx shadcn add https://extend-ui.com/registry/banner.json Baner core subcomponents and usage
Banner.LeftIcon
The Banner.LeftIcon component is used to display an icon on the left side of the banner.
<Banner>
<Banner.LeftIcon>🚀</Banner.LeftIcon>
</Banner>Banner.RightIcon
The Banner.RightIcon component is used to display an icon on the right side of the banner.
<Banner>
<Banner.RightIcon>🚀</Banner.RightIcon>
</Banner>Banner.Description
The Banner.Description component is used to display the main content of the banner.
<Banner>
<Banner.Description position="center">Description</Banner.Description>
</Banner>Banner.Dismiss
The Banner.Dismiss component is used to add a dismiss button to the banner.
<Banner>
<Banner.Dismiss />
</Banner>Banner component props
| Name | Type | Description |
|---|---|---|
| variant | default | primary | destructive | success | warning | info | outline | subtle | ghost | shimmer | Defines the visual style of the banner. It supports various predefined styles for different contexts. |
| position | top | bottom | center | static | Determines the positioning of the banner. Options include top, bottom, center, or static positioning. |
| size | default | sm | lg | Sets the size of the banner. Available sizes are default, small, and large. |
| width | default | auto | fixed | Controls the width of the banner. Options include full width, auto, or a fixed width. |
| asChild | boolean | If true, the banner will render as a child component using a Slot, useful for passing custom components. |
| link | string | An optional URL to make the banner content clickable. Defaults to "#" if provided. |
| onDismiss | () => void | An optional callback function triggered when the banner is dismissed. |
| className | string | Additional CSS classes to apply custom styling to the banner. |
| children | React.ReactNode | Optional custom content to replace the default title and icon rendering. |
| ...props | React.HTMLAttributes<HTMLDivElement> | Additional props that can be passed to the banner div, such as onClick, data attributes, etc. |