Announcement

A component for new product announcement or news.

import { Announcement } from '@somaui/ui/announcement';

Default

The default style of Announcement component.

Trending25% discount

on our new product

import { Announcement } from '@somaui/ui/announcement';

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% discount

on our new product

Default25% discount

on our new product

Large25% discount

on our new product

Large25% discount

on our new product

import { Announcement } from '@somaui/ui/announcement';

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"
        badgeText="Large"
        highlightedText="25% discount"
      >
        on our new product
      </Announcement>
    </>
  );
}

Colors

You can change the color of Announcement using color property.

Primary25% discount

on our new product

Secondary25% discount

on our new product

Danger25% discount

on our new product

Info25% discount

on our new product

Success25% discount

on our new product

Warning25% discount

on our new product

import { Announcement } from '@somaui/ui/announcement';

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% discount

on our every product

Gray Background25% discount

on our every product

import { Announcement } from '@somaui/ui/announcement';

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% discount

on our every product

Trending25% discount

on our every product

import { Announcement } from '@somaui/ui/announcement';
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="text-primary-dark w-5" />}
      >
        on our every product
      </Announcement>
      <Announcement
        className="flex-wrap"
        badgeText="Trending"
        highlightedText="25% discount"
        color="danger"
        endIcon={<ChevronRightIcon className="ml-1 w-3.5" />}
      >
        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"
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';

Announcement Colors

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