Astryx Banner

Component 13

About

Banner communicates system-wide announcements, statuses, and alerts, from Meta's Astryx design system. Supports info, success, warning, and error statuses, dismissable and collapsible content, action buttons via endContent, and a section container variant for in-page placement.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Banner to your project and fits it to your theme.

Code

How Astryx Banner is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import Banner from '@/components/ui/astryx-banner';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Stack} from '@astryxdesign/core/Layout';

export default function BannerStatuses() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Stack direction="vertical" gap={3}>
          <Banner
            status="info"
            title="A new software update is available"
            description="Version 2.4.1 includes performance improvements and bug fixes."
          />
          <Banner
            status="success"
            title="Changes saved"
            description="Your profile information has been updated successfully."
          />
          <Banner
            status="warning"
            title="Storage almost full"
            description="You have used 90% of your available storage."
          />
          <Banner
            status="error"
            title="Build failed"
            description="3 tests did not pass. Check the logs for details."
          />
        </Stack>
      </div>
    </Theme>
  );
}