NoticeSmart

In basic cases the most convenient way is to use the NoticeSmart component.

import QuestionAltM from '@semcore/icon/Question/m';
import ThumbUpM from '@semcore/icon/ThumbUp/m';
import WarningM from '@semcore/icon/Warning/m';
import { Flex } from '@semcore/ui/base-components';
import Button from '@semcore/ui/button';
import { NoticeSmart } from '@semcore/ui/notice';
import React from 'react';

const Demo = () => {
  const [firstHidden, setFirstHidden] = React.useState(false);
  const [secondHidden, setSecondHidden] = React.useState(false);

  return (
    <Flex direction='column' gap={3}>
      <NoticeSmart
        label={<QuestionAltM />}
        aria-label='New tool announcement'
        closable
        onClose={() => setFirstHidden(true)}
        hidden={firstHidden}
        title='New tool was launched'
        text='Hi there! There a cool new tool was launched. Take a look!'
      />
      <NoticeSmart theme='muted' label={<QuestionAltM />} hidden={secondHidden} text="It's just a regular message or hint." />
      <NoticeSmart
        aria-label='New feature announcement'
        theme='success'
        label={<ThumbUpM />}
        title="We've released a cool new feature!"
        closable
        onClose={() => setSecondHidden(true)}
        hidden={secondHidden}
        actions={(
          <Button use='primary' theme='success'>
            Learn more
          </Button>
        )}
        text='Unveiling a breakthrough feature, our latest product enhancement redefines the user experience with unparalleled innovation and functionality.'
      />
      <NoticeSmart
        theme='warning'
        title='The Link Building tool is under maintenance.'
        label={<WarningM />}
        aria-label='Maintenance notice'
        text='Starting new campaigns is temporarily unavailable, but you can continue working with your existing Link Building campaigns.'
      />
      <NoticeSmart
        theme='danger'
        text='Once you click Regenerate, the article will be rewritten. The previous version cannot be restored.'
      />
    </Flex>
  );
};

export default Demo;

Custom notice

You have the flexibility to construct custom notices by utilizing individual components.

TIP

For even more customization, refer to the FeedbackYesNo example.

import Calendar from '@semcore/icon/Calendar/l';
import Button from '@semcore/ui/button';
import Notice, { type NoticeProps } from '@semcore/ui/notice';
import React from 'react';

const Demo = (props: NoticeProps) => (
  <Notice aria-label='Custom notice example' {...props}>
    <Notice.Label>
      <Calendar />
    </Notice.Label>
    <Notice.Content>
      <Notice.Title size={400}>
        Strategize your next move with daily and weekly traffic data
      </Notice.Title>
      <Notice.Text size={300}>
        Gather insights on your competitors' daily and weekly web traffic at no cost until the next
        month.
      </Notice.Text>
      <Notice.Actions>
        <Button use='primary' size='l'>
          Got it
        </Button>
      </Notice.Actions>
    </Notice.Content>
    <Notice.Close size='l' />
  </Notice>
);

export default Demo;