Introduction
A Banner is a important piece of UI for displaying marketing, informational, and call-to-action messages to website visitors. It provides a flexible and reusable way to present messages that can be fixed to the top or bottom of the page as the user scrolls through the main content area. The component enhances user engagement and communication by delivering important content in a visually prominent and persistent manner.
With the React Banner component from Pol-ui you can import a simple but powerful ready to use component that can be customized to match your brand identity with props as color, rounded sizes, and theme.
To start using the banner component you need to import it from pol-ui:
import { Banner } from "pol-ui";Default Banner
If you don't need to customize the banner component, you can use it with the default settings. The default banner component has a background color of primary, a bordered prop setted to false and a rounded prop setted to "md".
Default banner
import { Banner } from "pol-ui";
import React from "react";
const BannerComponent = () => {
return (
<Banner>
<span>Welcome back to Pol-ui</span>
</Banner>
);
};
export default BannerComponent;Props
| Prop name | Type | Default | Description |
|---|---|---|---|
| bordered | boolean | false | If true, the banner will have a border |
| closable | boolean | true | If true, the banner will have a close button |
| color | Colors | primary | The color of the banner |
| rounded | RoundedSizes | md | The rounded size of the banner |
| onClose | () => void | The function to call when the banner is closed | |
| theme | BannerTheme | The theme of the banner | |
| buttonClassName | string | The class name of the close button | |
| hasMotion | boolean | true | If true, the banner will have a motion effect |
| motionDistance | number | 50 | The distance of the motion effect |
All colors
As a part of the Pol-UI library, the banner component supports all the colors from the design system to match your brand identity and provide a consistent user experience.
All colors
import { Banner } from "pol-ui";
import React from "react";
const BannerComponent = () => {
return (
<div className="flex flex-col gap-4">
<Banner color="error">Error</Banner>
<Banner color="info">Info</Banner>
<Banner color="success">Success</Banner>
<Banner color="warning">Warning</Banner>
<Banner color="secondary">Secondary</Banner>
<Banner color="primary">Primary</Banner>
</div>
);
};
export default BannerComponent;All colors in dark Mode
Dark mode is crucial for providing a comfortable user experience in low-light environments. The banner component supports all the colors from the design system also in dark mode:
All colors in dark Mode
import { Banner } from "pol-ui";
import React from "react";
const BannerComponent = () => {
return (
<div className="flex flex-col gap-4 dark bg-secondary-900 p-4 rounded-3xl">
<Banner color="error">Error</Banner>
<Banner color="info">Info</Banner>
<Banner color="success">Success</Banner>
<Banner color="warning">Warning</Banner>
<Banner color="secondary">Secondary</Banner>
<Banner color="primary">Primary</Banner>
</div>
);
};
export default BannerComponent;All rounded sizes
As usual in the Pol-UI library, the banner component supports all the rounded sizes, they can be specified using the rounded prop or a Tailwind class as rounded-xl or rounded-2xl.
The following example shows all the rounded sizes available in the design system via the rounded prop:
All rounded sizes
import { Banner, RoundedSizesEnum, RoundedSizes } from "pol-ui";
import React from "react";
const BannerComponent = () => {
return (
<div className="flex flex-col gap-4">
{Object.keys(RoundedSizesEnum).map((rounded, index) => (
<Banner key={index} rounded={rounded as RoundedSizes}>
{rounded}
</Banner>
))}
</div>
);
};
export default BannerComponent;Theme
To learn more about how to customize the appearance of components, please see the Theme docs.
interface BannerTheme {
base: string
bordered: IBoolean
color: ColorsType
rounded: RoundedSizesTypes
}