# Dual action brand, full width

> A cookie notice with Decline and Allow buttons, as a bar across the page on the brand colour.

URL: https://apogee.avaui.dev/docs/banner-sections/dual-action-brand-full-width
Last updated: 2026-10-20

A cookie notice with Decline and Allow buttons, as a bar across the page on the brand colour.

Last updated October 20, 2026

Live example: https://apogee.avaui.dev/examples/banner/dual-action-brand-full-width

```astro
---
/**
 * Dual action brand, full width: A cookie notice with Decline and Allow buttons, as a bar across the page on the brand colour.
 *
 * @block banner
 * @order 14
 */
import { BadgeCheck } from '@lucide/astro'
import Banner from '@/components/apogee/sections/Banner/Banner.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Link from '@/components/apogee/Link/Link.astro'
import { accentRuns, plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { BannerContent } from '@/components/apogee/sections/_shared/banner.ts'

/** @composable */
interface Props extends BannerContent {
  /** The button that declines. @category content */
  declineLabel?: string
  /** The button that accepts. @category content */
  acceptLabel?: string
}

const {
  heading = 'We use cookies to improve your experience',
  description = 'Read our *cookie policy*.',
  linkHref = '#',
  declineLabel = 'Decline',
  acceptLabel = 'Allow',
  closeLabel,
} = Astro.props
---

<Banner layout="full-width" background="primary" inline heading={plain(heading)} closeLabel={closeLabel}>
  <BadgeCheck slot="icon" class="size-5" aria-hidden="true" />
  <Fragment slot={description ? 'default' : 'none'}>{' '}{description && accentRuns(description).map((r) => (r.accent && linkHref ? <Link href={linkHref} color="inherit">{r.text}</Link> : r.text))}{" "}</Fragment>
  <div slot="actions" class="flex flex-col-reverse gap-2 sm:flex-row">
    <Button size="small" variant="outline" color="neutral" class="border-current! bg-transparent! text-inherit! shadow-none!">{declineLabel}</Button>
    <Button size="small" color="neutral">{acceptLabel}</Button>
  </div>
</Banner>
```

## Add

```sh
npx @ava-ui/apogee add banner/dual-action-brand-full-width
```

Every piece of copy is a prop, with the sample copy as its default. Pass yours, or `null` to hide a part; see [copy is props](https://apogee.avaui.dev/docs/banner-sections#copy-is-props).

This copies the block to `src/components/apogee/blocks/banner/` with everything it uses: Banner, Button, Link. Place it at the top of a page, or pass `fixed` to a floating banner to pin it to the bottom of the viewport. Use **Copy code** above to paste it instead.

## Accessibility

-   The banner is a region named by its message, so it shows up in a screen reader’s landmark list.
-   The close button removes the banner; it needs JS, so it hides without it and the banner stays.
-   The link inside the line is underlined, so it never relies on colour alone.

## Related

[

BannerA one-line announcement as a floating card or a full-width bar, with an icon, actions and a close button.

](https://apogee.avaui.dev/docs/sections/banner)