tsx
'use client';
​
import {XDSBanner} from '@xds/core/Banner';
import {XDSButton} from '@xds/core/Button';
import {XDSStack} from '@xds/core/Layout';
​
export default function BannerWithActionButton() {
  return (
    <XDSStack direction="vertical" gap={3}>
      <XDSBanner
        status="info"
        title="Your trial expires in 3 days"
        description="Upgrade now to keep access to all features."
        endContent={<XDSButton label="Upgrade" variant="secondary" size="sm" />}
      />
      <XDSBanner
        status="warning"
        title="API key expires soon"
        description="Generate a new key before December 1 to avoid service interruption."
        endContent={
          <XDSButton label="Renew key" variant="secondary" size="sm" />
        }
      />
      <XDSBanner
        status="error"
        title="Payment failed"
        description="We could not process your last payment."
        endContent={<XDSButton label="Retry" variant="secondary" size="sm" />}
      />
    </XDSStack>
  );
}

tsx
'use client';
​
import {XDSBanner} from '@xds/core/Banner';
import {XDSButton} from '@xds/core/Button';
import {XDSList, XDSListItem} from '@xds/core/List';
import {XDSStack} from '@xds/core/Layout';
import {XDSText} from '@xds/core/Text';
​
export default function BannerCollapsibleContent() {
  return (
    <XDSBanner
      status="warning"
      title="Configuration changes detected"
      description="Review the changes before they take effect."
      endContent={<XDSButton label="Review" variant="secondary" size="sm" />}
      isDismissable
      defaultIsExpanded>
      <XDSStack direction="vertical" gap={2}>
        <XDSText type="supporting" color="secondary">
          Changed settings:
        </XDSText>
        <XDSList density="compact">
          <XDSListItem label="Authentication method updated" />
          <XDSListItem label="Rate limits modified" />
        </XDSList>
      </XDSStack>
    </XDSBanner>
  );
}

tsx
'use client';
​
import {XDSBanner} from '@xds/core/Banner';
import {XDSStack} from '@xds/core/Layout';
​
export default function BannerDismissable() {
  return (
    <XDSStack direction="vertical" gap={3}>
      <XDSBanner
        status="success"
        title="Deployment complete"
        description="Version 3.2.0 is now live in production."
        isDismissable
      />
      <XDSBanner
        status="warning"
        title="Scheduled maintenance tonight"
        description="The system will be briefly unavailable from 2:00–3:00 AM."
        isDismissable
      />
      <XDSBanner
        status="info"
        title="New feature available"
        description="Try the new dashboard layout in Settings."
        isDismissable
      />
    </XDSStack>
  );
}

tsx
'use client';
​
import {XDSBanner} from '@xds/core/Banner';
import {XDSButton} from '@xds/core/Button';
import {XDSStack} from '@xds/core/Layout';
​
export default function BannerSectionVariant() {
  return (
    <XDSStack direction="vertical" gap={3}>
      <XDSBanner
        status="warning"
        title="Scheduled downtime"
        description="All services will be unavailable on Sunday from 2:00–4:00 AM."
        container="section"
        isDismissable
      />
      <XDSBanner
        status="info"
        title="Welcome to the new dashboard"
        description="We have redesigned the layout based on your feedback."
        container="section"
        endContent={
          <XDSButton label="Take a tour" variant="secondary" size="sm" />
        }
      />
    </XDSStack>
  );
}

tsx
'use client';
​
import {XDSBanner} from '@xds/core/Banner';
import {XDSStack} from '@xds/core/Layout';
​
export default function BannerStatuses() {
  return (
    <XDSStack direction="vertical" gap={3}>
      <XDSBanner
        status="info"
        title="A new software update is available"
        description="Version 2.4.1 includes performance improvements and bug fixes."
      />
      <XDSBanner
        status="success"
        title="Changes saved"
        description="Your profile information has been updated successfully."
      />
      <XDSBanner
        status="warning"
        title="Storage almost full"
        description="You have used 90% of your available storage."
      />
      <XDSBanner
        status="error"
        title="Build failed"
        description="3 tests did not pass. Check the logs for details."
      />
    </XDSStack>
  );
}