## Usage

The `<Notice />` component is used to highlight information which is pertinent in a feature or page. They can appear after a user has made an action to clarify changes or be presented prior to an action to help inform the user of what to expect.

```tsx live
<Notice
  title="Informative notice title"
  actions={[
    { label: 'Primary action', onClick: () => alert('Primary action') },
    { label: 'Secondary action', onClick: () => alert('Secondary action') },
  ]}
>
  <Text>
    Used to highlight information which is pertinent in a feature or page. They can appear after a user has made an
    action to clarify changes or be presented prior to an action to help inform the user of what to expect.
  </Text>
</Notice>
```

## Tones

Notices are available in a variety of tones for different situations. `informative` is the default tone.

```tsx live
<Flex flexDirection="column" gap="small">
  <Notice>
    <Text>Informative tone.</Text>
  </Notice>
  <Notice tone="positive">
    <Text>Positive tone.</Text>
  </Notice>
  <Notice tone="caution">
    <Text>Caution tone.</Text>
  </Notice>
  <Notice tone="critical">
    <Text>Critical tone.</Text>
  </Notice>
</Flex>
```

## Description

Descriptions are mandatory in a notice. For the best experience the description should be kept succinct especially when a title isn’t applied.

Text should be wrapped inside a `<Text />` component

```tsx live
<Notice tone="positive">
  <Text>
    Keeping the description succinct helps in not overwhelming the user with too much information, especially when no
    title is applied.
  </Text>
</Notice>
```

## Title

The `title` is an optional prop that can be applied to a notice. The title can be applied when the description may have a considerable amount of detail, or more context is needed.

```tsx live
<Notice tone="informative" title="Title for context">
  <Text>Keeping the description succinct helps in not overwhelming the user with too much information.</Text>
</Notice>
```

## Actions

Notices have the option to have ‘primary’ and ‘secondary’ actions added to offer users the ability to take a next step.
This can be supplied via the `actions` prop.

If there is only 1 action, then that will be considered the primary action. If there are 2 actions, the second action
in the action array will be considered as the secondary action.

A secondary action can only exist if a primary action exists as well.

```tsx live
<Flex flexDirection="column" gap="small">
  <Notice tone="positive" actions={[{ label: 'Primary action', onClick: () => alert('Primary action') }]}>
    <Text>Example of a primary action</Text>
  </Notice>
  <Notice
    tone="positive"
    actions={[
      { label: 'Primary action', onClick: () => alert('Primary action') },
      { label: 'Secondary action', onClick: () => alert('Secondary action') },
    ]}
  >
    <Text>Example of both a primary action &amp; secondary action</Text>
  </Notice>
</Flex>
```

#### Navigational actions

For actions, an `href` can be used instead of an `onClick`. Using the `href` will convert the button
into a link that navigates the user to another page.

```tsx live
<Notice
  tone="positive"
  actions={[
    { label: 'Primary navigation action', href: '/' },
    { label: 'Secondary navigation action', href: '/' },
  ]}
>
  <Text>Example of where actions is a link</Text>
</Notice>
```

## Dismissing the notice

A common pattern is to let the user dismiss the notice, as a way of acknowledging that the message has been received and to free up screen real estate.

You can use the `actions` to implement this pattern.

For most cases, use a conversational tone for the dismissing action’s label, such as "Okay, got it".

```tsx live
const [firstNoticeDisplay, setFirstNoticeDisplay] = useState(true);
const [secondNoticeDisplay, setSecondNoticeDisplay] = useState(true);
const [modalOpen, setModalOpen] = useState(false);

return (
  <Flex flexDirection="column" gap="small">
    {firstNoticeDisplay && (
      <Notice
        tone="positive"
        actions={[
          { label: 'Open document', onClick: () => setModalOpen(true) },
          { label: 'Okay, got it', onClick: () => setFirstNoticeDisplay(false) },
        ]}
      >
        <Text>
          The dismiss action should either come after the primary action or be presented on its own. The dismiss
          action’s copy can be changed and is flexible depending on the type of message that is being presented. For
          most cases a conversational tone for the dismiss action, such as “Okay, got it” should work fine.
        </Text>
      </Notice>
    )}
    {secondNoticeDisplay && (
      <Notice tone="positive" actions={{ label: 'Okay, got it', onClick: () => setSecondNoticeDisplay(false) }}>
        <Text>
          The dismiss action should either come after the primary action or be presented on its own. The dismiss
          action’s copy can be changed and is flexible depending on the type of message that is being presented. For
          most cases a conversational tone for the dismiss action, such as “Okay, got it” should work fine.
        </Text>
      </Notice>
    )}
  </Flex>
);
```

## Width

The `<Notice />` component will fill a component or section container in a page.

```tsx live
<Flex flexDirection="column" gap="small">
  <Box width="12rem">
    <Notice>
      <Text>A Notice constrained to its parent container</Text>
    </Notice>
  </Box>
  <Notice>
    <Text>A block Notice</Text>
  </Notice>
</Flex>
```

## Multi-line description

Use regular html tags such as `<br />` to format the text. THe following example showcases a multi-lined notice.

```tsx live
<Notice tone="critical" title="Unable to save form">
  <Text>
    Please see the following errors:
    <br />
    • Error 1
    <br />• Error 2
  </Text>
</Notice>
```

## Accessibility with LiveRegion

Notice components often display important status messages that should be announced to screen readers. Wrap Notice with [LiveRegion](/packages/a11y/#liveregion) when the content changes dynamically:

**Important:** LiveRegion components should never be unmounted. The LiveRegion container stays in the DOM while only the Notice content appears and disappears. This ensures screen readers can detect and announce changes properly.

### When to use LiveRegion with Notice

**Use LiveRegion for:**

- Important status updates
- Dynamic content that appears and disappears
- Critical alerts that must be announced immediately

**Don't use LiveRegion for:**

- Static notices that don't change
- Notices that are always visible
- Decorative or informational content

### Basic Usage

```tsx live
const [message, setMessage] = useState('');

return (
  <Flex flexDirection="column" gap="large">
    <PlaygroundCard>
      <Toggle
        label="Toggle message"
        onClick={() => setMessage(message ? '' : 'Timesheet submitted successfully!')}
        size="small"
        toggled={!!message}
      />
    </PlaygroundCard>

    <LiveRegion>
      {message && (
        <Notice tone="positive">
          <Text>{message}</Text>
        </Notice>
      )}
    </LiveRegion>
  </Flex>
);
```

The LiveRegion component becomes visually hidden when empty and announces content changes to screen readers.

Notice

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources