Banner

Full-width status strip for a single announcement. Optional action via the button prop.

Default

Message in the default slot. button takes href, content, and an optional onClick.

Big News – New components finally available


        
          1
          
          <Banner :button="{ href: '/', content: 'Read more' }" class="p-4">
        

          2
          
            <b>Big News</b> – New components finally available
        

          3
          
          </Banner>

Without action

Omit button when there is nothing to do except read.

Scheduled maintenance starts Friday at 18:00 UTC.


        
          1
          
          <Banner class="p-4">
        

          2
          
            Scheduled maintenance starts Friday at 18:00 UTC.
        

          3
          
          </Banner>

Best practices

Banner spans its container. Use it for a page- or layout-level announcement, not a field error and not a Toast.
One banner at a time. A second strip means the first message was not resolved.
Keep the copy to one sentence. Lead with the fact, then the window or impact. The action label is a verb: Read more, View changelog.
Pass button.href when the control changes the URL. Use button.onClick only for an in-page handler.
This port has no variant or dismiss prop. Persistent product chrome belongs in the layout; a closable notice is a Note or Toast.