# Banner

A prominent message that spans the full width of its container to announce important information.

---

## Default

```tsx
import { Banner } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <Banner button={{ href: '#', content: 'Read more' }} className="p-4">
      <b>Big News</b> – New components finally available
    </Banner>
  );
}
```