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".
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 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 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:
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
}