---
sidebar_position: 3
---

import { Announcement } from "rizzui";
import { ChevronRightIcon, MegaphoneIcon } from "@heroicons/react/24/outline";
import Paper from "@site/src/components/paper";

# Announcement

A component for new product announcement or news.

```jsx
import { Announcement } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of **Announcement** component.

<Paper>
  <Announcement
    className="flex-wrap"
    badgeText="Trending"
    highlightedText="25% discount"
  >
    on our new product
  </Announcement>
</Paper>

```jsx
import { Announcement } from "rizzui";

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

<div className="mb-16" />

## Sizes

You can change the size of **Announcement** using [**size**](#announcement-sizes) property.

<Paper className="gap-4 justify-start items-start">
  <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>
</Paper>

```jsx
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>
    </>
  );
}
```

<div className="mb-16" />

## Rounded

You can change the border radius of **Announcement** using [**rounded**](#announcement-rounded) property.

<Paper className="gap-4 justify-start items-start">
  <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>
</Paper>

```tsx
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>
    </>
  );
}
```

<div className="mb-16" />

## Colors

You can change the color of **Announcement** using [**color**](#announcement-colors) property.

<Paper className="grid grid-cols-1 gap-4">
  <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>
</Paper>

```tsx
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>
    </>
  );
}
```

<div className="mb-16" />

## Background Colors

You can change background color of **Announcement** using **bgColor** property.

<Paper className="gap-4 justify-start items-start">
  <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>
</Paper>

```jsx
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>
    </>
  );
}
```

<div className="mb-16" />

## With Icons

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

<Paper className="gap-4 justify-start items-start">
  <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>
</Paper>

```jsx
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>
    </>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Announcement Props

Here is the API documentation of the Announcement component.

<div className="overflow-x-auto">

|          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](#announcement-sizes)   |                The size of the component.                |     `"md"`     |
|         rounded          | [AnnouncementRounded](#announcement-rounded) |                The rounded variants are:                 |    `"full"`    |
|          color           |  [AnnouncementColors](#announcement-colors)  |                 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 |      \_\_      |

</div>

<div className="mb-10" />

### Announcement Sizes

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

<div className="mb-10" />

### Announcement Rounded

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

<div className="mb-10" />

### Announcement Colors

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