Banner

Summary

Banner is a surface-card component used to surface a product or feature message. It can include a leading icon (slotStart), a tagline / heading / subheading text stack, an inline content slot (slotContent), an optional dismiss control (closable), and an optional CTA Button. As of v1.3 the variant property drives whether the CTA shows: promotion (text only) vs action (with button). The breakpoint property drives layout — stacking the button below the text (xs) or placing it inline to the right (md / lg).

Anatomy

• 1
  Banner — root container. Background bg-secondary, radius border-radius-lg (20), drop shadow shadow-bevel.
• 2
  slotStart — leading icon area (32×32). Depends on Slot (size sm). On by default.
• 3
  tagline — caption text above the heading. Depends on Text.
• 4
  IconButton — dismiss control (top-right). IconButton size sm, variant neutralSubtle, appearance transparent. Shown when closable = true.
• 5
  heading — primary heading text. Depends on Text.
• 6
  subHeading — secondary text. Depends on Text.
• 7
  slotContent — content slot below the subheading (progress bars, metadata, chips). Slot size sm. On by default.
• 8
  Button — CTA. Button variant accent, appearance fill, size lg. Shown for variant = action.
• 9
  slotEnd — trailing slot (instance-swap). Off by default.

Properties / API

Variants

• promotion (default) — text + content, no CTA button. Informational / marketing messages without a direct action.
• action — shows the CTA button. Use only when a clear call-to-action is required; overuse reduces effectiveness.

States

• default — standard banner on bg-secondary.
• active — highlighted / tinted background, driven by application logic for selection or in-progress banners.

Sizes

• md (default) — 16px heading; button 48px tall (xs) / 36px tall (md).
• sm — proportionally smaller, compact layout.

Breakpoints

The breakpoint prop is the primary layout driver (a discrete prop, not a CSS media query — the consumer sets it to match its container/viewport).

Design tokens

Colour

Radius · spacing · type · elevation

• Radius: border-radius-lg = 20 (banner) · border-radius-full = 9999 (button pill).
• Spacing (px): 2 · 8 · 12 · 16 · 28. xs internal stack uses 16px gap + 16px padding.
• Type (Inter): subHeading = Medium 16/22 · caption = Regular 12/18.
• Elevation: shadow-bevel = drop #0000000a 0/2/8 + inner #ffffff00 0/0.5.

Accessibility

• The dismiss affordance is a real IconButton — expose an accessible “Close / dismiss” label.
• The CTA is a real Button sub-component and inherits its own accessibility (focus, role, label).
• state=active conveys meaning beyond colour — ensure it is announced/structured for assistive tech where it carries information.
• Follow-up: explicit role, keyboard order, contrast ratios, hit-area, screen-reader behaviour.

Usage

Implementation status

Existing native implementations found in the playground repos (parity with v1.3 to be verified per platform):

Changelog

• v1.317.6.2026
  • Added property variant = promotion / action.
  • Existing banners become promotion; new action exposes the CTA.
  • Driver: Supernova next-best-action banners.
• v1.214.1.2026
  • Added size sm.
  • Renamed slots to slotStart & slotContent.
  • Driver: Leap Dashboard DIP banner.
• v1.119.12.2025
  • Adjusted “closable” IconButton to use the correct sm variant.
• v1.016.10.2025
  • Initial release.

Ticket scaffold

Jira ticket template

Jira wiki-markup. Copy into a new issue, replace every [PLACEHOLDER], and duplicate one per platform.

h2. [PLATFORM] · Banner v1.3 — add variant property (promotion / action)

*Project / Epic*  : [EPIC-KEY]  Aurora AppKit · Supernova
*Issue type*      : Story
*Components*      : Banner · [PLATFORM]
*Labels*          : aurora-appkit, supernova, design-system, banner
*Priority*        : [Medium]
*Story points*    : [estimate]
*Fix version*     : Banner v1.3
*Sprint*          : [sprint]
*Assignee*        : [assignee]

h3. Background
The Supernova "next best action" work introduces a call-to-action Banner. v1.3 adds a {{variant}} property so the same component renders as a passive promotion or an actionable banner. Existing banners become {{variant = promotion}} (no behaviour change); the new {{variant = action}} exposes the CTA button.

h3. Objective
Implement Banner v1.3 on [PLATFORM]: add the {{variant}} property and the action layout, mapped to [PLATFORM] conventions, with no regression to existing promotion banners.

h3. Design source
* Figma — "Aurora AppKit · Components" -> Banner page (Specification, Developer Handover, Changelog frames)
* Handover spec — supernova-handover/banner.html
* [paste the platform-specific Figma frame link]

h3. Spec (platform-agnostic — map to [PLATFORM] idioms)
* New property {{variant}} : {{promotion}} (default) | {{action}}. promotion hides the CTA; action shows it.
* Unchanged props : {{breakpoint}} (xs | md | lg) · {{size}} (md | sm) · {{state}} (default | active) · {{closable}} · {{slotStart}} · {{slotContent}} · {{slotEnd}} (+ swaps) · {{tagline}} / {{heading}} / {{subHeading}}.
* CTA (action only) : Button variant accent · appearance fill · size lg.
* CTA per breakpoint : xs = full-width, 48 tall, stacked below text; md / lg = hug/inline, 36 tall, right of text (lg = wider gutters).
* Tokens (bind, never hard-code) : {{bg-secondary}} · {{bg-accent}} · {{text-primary}} / {{text-secondary}} · {{text-primary-on-color}} · {{border-radius-lg}} 20 · {{border-radius-full}} · {{shadow-bevel}}.
* Accessibility : CTA is a real Button (inherits focus/role/label); closable dismiss needs an accessible "Close" label.

h3. Scope
In scope : {{variant}} + action layout at xs / md / lg; default existing usages to {{promotion}}.
Out of scope : other platforms (separate tickets); Button / IconButton internals.

h3. Dependencies
* Button + IconButton available on [PLATFORM]
* Tokens for the per-breakpoint button sizing

h3. Acceptance criteria
# Given an existing banner upgraded to v1.3 with no variant set, Then it renders as {{promotion}} with no visual/behaviour change.
# Given {{variant = action}}, Then the accent/fill/lg CTA shows and fires its action.
# Given {{breakpoint = xs}}, Then the CTA is full-width below the text; given md/lg, inline to the right.
# Background is bound to {{bg-secondary}}; verified light and dark.
# When {{closable = true}}, the dismiss control exposes an accessible "Close" label.
# All sizing/spacing use tokens; button sizing is per-breakpoint (not shared).

h3. Definition of Done
* Matches the Figma Specification + Developer Handover (visual diff) at xs / md / lg, light and dark
* No hard-coded colours/sizes — Aurora tokens only
* Unit / snapshot tests updated; existing banner tests pass
* Reviewed and merged; component version bumped to v1.3; changelog updated

h3. QA / test notes
* Regression: existing promotion banners unchanged
* Toggle variant / breakpoint / closable / slots; empty slots collapse with no residual gap
* Dark mode and dynamic text sizes