Banner

Banner is part of the Containers set, imported from @jcsoftdev/ui/containers.

Import

import { Banner } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/banner.

Usage

<Banner tone="info" icon={<Info className="size-4" />}>
  Hoy la barbería abre una hora más tarde, a las 10:00.
</Banner>

Props

Prop	Type	Default	Description
tone	"danger" | "warning" | "success" | "info"	"info"
icon	ReactNode		Decorative icon on the left; marked aria-hidden.
action	ReactNode		Actions on the right, e.g. a retry button.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Success
• Warning
• Danger
• With Action
• Without Icon
• Narrow

Source

packages/ui/src/containers/banner/banner.tsx