feat(banner): add action prop for CTA buttons in structured mode

[geoquant]

Summary

Adds an action?: ReactNode slot prop to the Banner component, rendered at the trailing end of the banner in structured mode (when using title or description). This lets consumers add CTA buttons or a dismiss icon without falling back to the children prop, which can't be combined with title/description.

Changes

• packages/kumo/src/components/banner/banner.tsx — Added action prop to BannerProps; renders in a shrink-0 flex container to the right of the title/description content area
• packages/kumo-docs-astro/src/components/demos/BannerDemo.tsx — Added BannerWithActionDemo (CTA button + dismissable X icon), BannerWithActionsDemo (multiple buttons)
• packages/kumo-docs-astro/src/pages/components/banner.mdx — Added "With action" and "With multiple actions" doc sections
• .changeset/banner-action-slot.md — Minor changeset

Usage

// CTA button
<Banner
  icon={<Info weight="fill" />}
  title="Update available"
  description="A new version is ready to install."
  action={<Button size="sm">Update now</Button>}
/>

// Dismissable
<Banner
  icon={<Info weight="fill" />}
  title="Update available"
  description="A new version is ready to install."
  action={
    <Button size="sm" variant="ghost" shape="square" icon={X} aria-label="Dismiss" />
  }
/>

// Multiple actions
<Banner
  variant="alert"
  icon={<Warning weight="fill" />}
  title="Session expiring"
  description="Your session will expire in 5 minutes."
  action={
    <>
      <Button size="sm" variant="secondary">Dismiss</Button>
      <Button size="sm">Extend session</Button>
    </>
  }
/>

Notes

• Fully backward compatible — no changes to legacy children/text code path
• action is only rendered in structured mode (when title or description is set)
• Layout uses flex with min-w-0 flex-1 on content and shrink-0 on action slot

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@323

commit: a75f6f6

[github-actions]

Docs Preview

View docs preview

Commit: a75f6f6

[github-actions]

Visual Regression Report

11 screenshot(s) with visual changes:

Button / Loading State

2 px (0%) changed

Before	After	Diff

Dialog / Dialog Basic

114 px (0.1%) changed

Before	After	Diff

Dialog / Dialog Confirmation

353 px (0.31%) changed

Before	After	Diff

Dialog / Dialog With Select

130 px (0.11%) changed

Before	After	Diff

Dialog / Dialog With Combobox

225 px (0.2%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

225 px (0.2%) changed

Before	After	Diff

Select / Select With Field

635 px (0.48%) changed

Before	After	Diff

Select / Select With Tooltip

350 px (0.3%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select / Select Complex

1,188 px (0.88%) changed

Before	After	Diff

Select (Open)

0 px (0%) changed

Before	After	Diff

19 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Variant: Secondary Destructive
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Dialog / Dialog With Actions
• Dialog / Dialog Alert
• Dialog (Open)
• Select / Select Basic
• Select / Select Without Label
• Select / Select Placeholder
• Select / Select Custom Rendering
• Select / Select Multiple

---

Generated by Kumo Visual Regression