@purpurds/notification-banner

import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import * as NotificationBannerStories from "./src/notification-banner.stories"; import packageInfo from "./package.json";

NotificationBanner

Version {packageInfo.version}

Showcase

Properties

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"

Usage

In MyApp.tsx

import "@purpurds/purpur/styles";

In MyComponent.tsx

With Link

import { NotificationBanner, Link } from "@purpurds/purpur";

export const MyComponent = () => (
  <NotificationBanner
    title="Lorem ipsum"
    description="Donec placerat ornare neque sit amet euismod."
    link={
      <Link variant="text" href="http://purpur.telia.io">
        Praesent pretium augue cursus
      </Link>
    }
  />
);

With custom icon and no Link

import { NotificationBanner, IconBattery } from "@purpurds/purpur";

export const MyComponent = () => (
  <NotificationBanner
    title="Low battery"
    description="Please connect your device to a charger."
    icon={<IconBattery size="sm" />}
  />
);