Announcement

A component for new product announcement or news.

import { Announcement } from "rizzui";

Default

The default style of Announcement component.

Trending25% discounton our new product

import { Announcement } from "rizzui";

export default function App() {
  return (
    <Announcement
      className="flex-wrap"
      badgeText="Trending"
      highlightedText="25% discount"
    >
      on our new product
    </Announcement>
  );
}

Sizes

You can change the size of Announcement using size property.

Small25% discounton our new product

Default25% discounton our new product

Large25% discounton our new product

Extra Large25% discounton our new product

import { Announcement } from "rizzui";

export default function App() {
  return (
    <>
      <Announcement
        className="flex-wrap"
        size="sm"
        badgeText="Small"
        highlightedText="25% discount"
      >
        on our new product
      </Announcement>
      <Announcement
        className="flex-wrap"
        badgeText="Default"
        highlightedText="25% discount"
      >
        on our new product
      </Announcement>
      <Announcement
        className="flex-wrap"
        size="lg"
        badgeText="Large"
        highlightedText="25% discount"
      >
        on our new product
      </Announcement>
      <Announcement
        className="flex-wrap"
        size="xl"
        badgeText="Extra Large"
        highlightedText="25% discount"
      >
        on our new product
      </Announcement>
    </>
  );
}

Rounded

You can change the border radius of Announcement using rounded property.

Rounded Small25% discounton our new product

Rounded Medium25% discounton our new product

Rounded Large25% discounton our new product

Rounded None25% discounton our new product

Rounded Full25% discounton our new product

import { Announcement } from "rizzui";

export default function App() {
  return (
    <>
      <Announcement
        className="flex-wrap"
        rounded="sm"
        badgeText="Rounded Small"
        highlightedText="25% discount"
      >
        on our new product
      </Announcement>
      <Announcement
        className="flex-wrap"
        rounded="md"
        badgeText="Rounded Medium"
        highlightedText="25% discount"
      >
        on our new product
      </Announcement>
      <Announcement
        className="flex-wrap"
        rounded="lg"
        badgeText="Rounded Large"
        highlightedText="25% discount"
      >
        on our new product
      </Announcement>
      <Announcement
        className="flex-wrap"
        rounded="none"
        badgeText="Rounded None"
        highlightedText="25% discount"
      >
        on our new product
      </Announcement>
      <Announcement
        className="flex-wrap"
        badgeText="Rounded Full"
        highlightedText="25% discount"
      >
        on our new product
      </Announcement>
    </>
  );
}

Colors

You can change the color of Announcement using color property.

Primary25% discounton our new product

Secondary25% discounton our new product

Danger25% discounton our new product

Info25% discounton our new product

Success25% discounton our new product

Warning25% discounton our new product

import { Announcement } from "rizzui";

export default function App() {
  return (
    <>
      <Announcement
        className="flex-wrap"
        color="primary"
        badgeText="Primary"
        highlightedText="25% discount"
      >
        on our new product
      </Announcement>
      <Announcement
        className="flex-wrap"
        color="secondary"
        badgeText="Secondary"
        highlightedText="25% discount"
      >
        on our new product
      </Announcement>
      <Announcement
        className="flex-wrap"
        color="danger"
        badgeText="Danger"
        highlightedText="25% discount"
      >
        on our new product
      </Announcement>
      <Announcement
        className="flex-wrap"
        color="info"
        badgeText="Info"
        highlightedText="25% discount"
      >
        on our new product
      </Announcement>
      <Announcement
        className="flex-wrap"
        color="success"
        badgeText="Success"
        highlightedText="25% discount"
      >
        on our new product
      </Announcement>
      <Announcement
        className="flex-wrap"
        color="warning"
        badgeText="Warning"
        highlightedText="25% discount"
      >
        on our new product
      </Announcement>
    </>
  );
}

Background Colors

You can change background color of Announcement using bgColor property.

White Background25% discounton our every product

Gray Background25% discounton our every product

import { Announcement } from "rizzui";

export default function App() {
  return (
    <>
      <Announcement
        className="flex-wrap"
        badgeText="White Background"
        highlightedText="25% discount"
      >
        on our every product
      </Announcement>
      <Announcement
        className="flex-wrap"
        badgeText="Gray Background"
        highlightedText="25% discount"
        bgColor="muted"
      >
        on our every product
      </Announcement>
    </>
  );
}

With Icons

You can add icons to Announcement using startIcon & endIcon property.

25% discounton our every product

Trending25% discounton our every product

import { Announcement } from "rizzui";
import { ChevronRightIcon, MegaphoneIcon } from "@heroicons/react/24/outline";

export default function App() {
  return (
    <>
      <Announcement
        className="flex-wrap"
        highlightedText="25% discount"
        color="primary"
        startIcon={<MegaphoneIcon className="w-5 text-primary-dark" />}
      >
        on our every product
      </Announcement>
      <Announcement
        className="flex-wrap"
        badgeText="Trending"
        highlightedText="25% discount"
        color="danger"
        endIcon={<ChevronRightIcon className="w-3.5 ml-1" />}
      >
        on our every product
      </Announcement>
    </>
  );
}

API Reference

---

Announcement Props

Here is the API documentation of the Announcement component.

Props	Type	Description	Default
badgeText	string	Pass badge text to have badge at the beginning	__
highlightedText	string	Pass highlighted text at the beginning	__
children			__
size	AnnouncementSizes	The size of the component.	"md"
rounded	AnnouncementRounded	The rounded variants are:	"full"
color	AnnouncementColors	Choose color variations	"primary"
bgColor	background muted	Background color of the component	"background"
className	string	Pass className to customize announcement design	__
startIcon	ReactNode	Place icon at the beginning	__
endIcon	ReactNode	Place icon at the end	__
badgeClassName	string	Pass badgeClassName to style badge	__
highlightedTextClassName	string	Pass hightlightedTextClassName to style highlighted text	__

Announcement Sizes

type AnnouncementSizes = "sm" | "md" | "lg" | "xl";

Announcement Rounded

type AnnouncementRounded = "pill" | "sm" | "lg" | "none" | "md";

Announcement Colors

type AnnouncementColors =
  | "primary"
  | "secondary"
  | "danger"
  | "info"
  | "success"
  | "warning";