Notification - Semi Design Next

Demos

How to import

import { Notification } from '@fibrous/semi-ui-solid';

Static methods render outside the component tree. They read Notification.config(), the global defaults and the default locale, and do not inherit the ConfigProvider or LocaleProvider of their position; use Notification.useNotification() when you need those.

Basic Usage

Close after 3 seconds.

Code

import { Button, Notification } from '@fibrous/semi-ui-solid';

export default function NotificationDemo() {
    return (
        <Button
            onClick={() =>
                Notification.open({
                    title: 'Hi, Bytedance',
                    content: 'ies dance dance dance',
                    duration: 3,
                })
            }
        >
            Display Notification
        </Button>
    );
}

Position

Use position to set pop up position, supporting one of: top、bottom、topLeft、topRight(default)、bottomLeft、bottomRight。

Code

import { Button, ButtonGroup, Notification } from '@fibrous/semi-ui-solid';

const opts = {
    duration: 3,
    position: 'topRight',
    content: 'semi-ui-notification',
    title: 'Hi bytedance',
} as const;

export default function NotificationDemo() {
    return (
        <>
            <ButtonGroup>
                <Button onClick={() => Notification.info({ ...opts, position: 'top' })}>top</Button>
                <Button onClick={() => Notification.info({ ...opts, position: 'topLeft' })}>topLeft</Button>
                <Button onClick={() => Notification.info(opts)}>topRight</Button>
            </ButtonGroup>
            <br />
            <br />
            <ButtonGroup>
                <Button onClick={() => Notification.info({ ...opts, position: 'bottom' })}>bottom</Button>
                <Button onClick={() => Notification.info({ ...opts, position: 'bottomRight' })}>bottomRight</Button>
                <Button onClick={() => Notification.info({ ...opts, position: 'bottomLeft' })}>bottomLeft</Button>
            </ButtonGroup>
        </>
    );
}

With Icons

Use different methods to show Notification with icons or you can pass in icon for customized icon.

默认的图标

自定义图标

Code

import { IconToutiaoLogo, IconVigoLogo } from '@fibrous/semi-icons-solid';
import { Button, Notification } from '@fibrous/semi-ui-solid';

const opts = {
    title: 'Hi, Bytedance',
    content: 'ies dance dance dance',
    duration: 3,
};

export default function NotificationDemo() {
    return (
        <>
            <h5>默认的图标</h5>
            <Button type="primary" onClick={() => Notification.success(opts)} style={{ margin: '4px' }}>
                Success
            </Button>
            <Button onClick={() => Notification.info(opts)} style={{ margin: '4px' }}>
                Info
            </Button>
            <Button type="warning" onClick={() => Notification.warning(opts)} style={{ margin: '4px' }}>
                Warning
            </Button>
            <Button type="danger" onClick={() => Notification.error(opts)} style={{ margin: '4px' }}>
                Error
            </Button>
            <h5>自定义图标</h5>
            <Button
                aria-label="Toutiao 图标通知"
                icon={<IconToutiaoLogo />}
                style={{ 'margin-right': '5px' }}
                onClick={() =>
                    Notification.info({
                        ...opts,
                        icon: <IconToutiaoLogo style={{ color: 'red' }} />,
                    })
                }
            />
            <Button aria-label="Vigo 图标通知" icon={<IconVigoLogo />} style={{ 'margin-right': '5px' }} onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo /> })} />
            <Button aria-label="粉色 Vigo 图标通知" icon={<IconVigoLogo />} onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo style={{ color: 'pink' }} /> })} />
        </>
    );
}

Colored Background

You could use theme for a colored background style. Default is normal.

Code

import { Button, Notification } from '@fibrous/semi-ui-solid';

const opts = {
    title: 'Hi, Bytedance',
    content: 'Hi, Bytedance dance dance',
    duration: 3,
    theme: 'light',
} as const;

export default function NotificationDemo() {
    return (
        <>
            <Button onClick={() => Notification.info(opts)}>Info</Button>
            <br />
            <br />
            <Button onClick={() => Notification.success(opts)}>Success</Button>
            <br />
            <br />
            <Button type="warning" onClick={() => Notification.warning(opts)}>
                Warning
            </Button>
            <br />
            <br />
            <Button type="danger" onClick={() => Notification.error(opts)}>
                Error
            </Button>
        </>
    );
}

Custom Children with Link

Use with Typography to create operation links for more complicated situations.

title, content and icon accept JSX elements or functions returning JSX; the demo below builds its JSX on click, so each notification gets fresh nodes.

Code

import { Button, Notification, Typography } from '@fibrous/semi-ui-solid';

const { Text } = Typography;

export default function NotificationDemo() {
    // content is JSX built inside the handler: a static notification renders it once, so each click needs a new node
    return (
        <Button
            onClick={() =>
                Notification.info({
                    title: 'This is a title',
                    content: (
                        <>
                            <div>Hi, Bytedance dance dance</div>
                            <div style={{ 'margin-top': '8px' }}>
                                <Text link>查看详情</Text>
                                <Text link style={{ 'margin-left': '20px' }}>
                                    一会再看
                                </Text>
                            </div>
                        </>
                    ),
                    duration: 3,
                })
            }
        >
            Display Notification
        </Button>
    );
}

Delay

Use duration to set up time delay. By default it closes after 3 seconds.

Code

import { Button, Notification } from '@fibrous/semi-ui-solid';

const opts = {
    content: 'Hi, Bytedance dance dance',
    duration: 10,
};

export default function NotificationDemo() {
    return <Button onClick={() => Notification.info(opts)}>Close After 10s</Button>;
}

Manual Close

Set duration to 0 if you do not want the Notification to close by itself. In this case, it could only be closed manually.

Code

import { createSignal } from 'solid-js';
import { Button, Notification } from '@fibrous/semi-ui-solid';

const opts = {
    content: 'Not auto close',
    title: 'Hi',
    duration: 0,
};

export default function NotificationDemo() {
    const [ids, setIds] = createSignal<string[]>([]);

    function show() {
        const id = Notification.info(opts);
        setIds([...ids(), id]);
    }

    function hide() {
        const [first, ...rest] = ids();
        if (first) {
            Notification.close(first);
        }
        setIds(rest);
    }

    return (
        <>
            <Button type="primary" onClick={show}>
                Show Notification
            </Button>
            <br />
            <br />
            <Button type="primary" onClick={hide}>
                Hide Notification
            </Button>
        </>
    );
}

Stack

With stack, the notifications at one position stack once there are more than the threshold, and expand on hover. true sets the threshold to 3, and a number sets a custom one; a stack shows its front 3 layers only.

Code

import { Button, Notification } from '@fibrous/semi-ui-solid';

export default function NotificationDemo() {
    return (
        <Button
            onClick={() => {
                Notification.info({ title: 'Hi', content: 'Hi, Bytedance dance dance', duration: 10, stack: true });
            }}
        >
            Click multiple times
        </Button>
    );
}

Update content

You can use id to update notification content.

Code

import { Button, Notification } from '@fibrous/semi-ui-solid';

export default function NotificationDemo() {
    return (
        <Button
            onClick={() => {
                const id = Notification.open({
                    title: 'Hi, Bytedance',
                    content: 'ies dance dance dance',
                    duration: 3,
                });
                setTimeout(() => {
                    Notification.open({
                        title: 'Hi, Bytedance',
                        content: 'updated',
                        duration: 10,
                        id,
                    });
                }, 1000);
            }}
        >
            Display Notification
        </Button>
    );
}

Consume Context

Use Notification.useNotification() to create a contextHolder and place it where the context should be inherited. Call the hook below the Provider you need: notifications render where contextHolder is placed, inherit the context, ConfigProvider and locale there, and enter and leave with the same animations as the static methods. A function passed as content, icon or title is rendered inside the notification and can read the context of that position; JSX created in an event handler has no owner, so it cannot read context.

Code

import { createContext, createSignal, useContext } from 'solid-js';
import { Button, Notification, Space } from '@fibrous/semi-ui-solid';

const ReachableContext = createContext<string>();

// The holder must be created under the Provider: its notifications read the context around it
function HookDemo() {
    const [notification, contextHolder] = Notification.useNotification();
    const [ids, setIds] = createSignal<string[]>([]);

    function show() {
        const id = notification.info({
            title: 'Hook Notification',
            // A function is called where the notice renders, so it reads the context around contextHolder
            content: () => `ReachableContext: ${useContext(ReachableContext)}`,
            duration: 0,
        });
        setIds([...ids(), id]);
    }

    function hide() {
        const [first, ...rest] = ids();
        if (first) {
            notification.close(first);
        }
        setIds(rest);
    }

    return (
        <>
            <Space>
                <Button onClick={show}>Show Notification</Button>
                <Button onClick={hide}>Hide Notification</Button>
            </Space>
            {contextHolder}
        </>
    );
}

export default function NotificationDemo() {
    return (
        <ReachableContext.Provider value="Light">
            <HookDemo />
        </ReachableContext.Provider>
    );
}

API Reference

The static methods provided are as follows:

Display: You can pass in options object directly. Methods return the value of id: const id = Notification.open({ /*...options*/ })

Notification.open({content: 'message', duration: 3})
Notification.info({content: 'message', duration: 3})
Notification.error({content: 'message', duration: 3})
Notification.warning({content: 'message', duration: 3})
Notification.success({content: 'message', duration: 3})

Close Manually (id is the return value of the display methods)

Notification.close(id)

Property	Description	Type	Default
class	Class name of the notification element	string
content	Content. A function is rendered inside the notification and can read the context of that position	JSX.Element \| (() => JSX.Element)	''
direction	Text direction. A per-notification option only, not part of the global configuration; follows ConfigProvider when omitted	`ltr` \| `rtl`
duration	Automatic close delay in seconds; 0 disables auto-close	number	3
getPopupContainer	The parent DOM node the popup renders into; it needs `position: relative`. This changes where the popup sits in the DOM tree, not where it is shown. Only takes effect when the container is first created.	() => HTMLElement	() => document.body
icon	Icon at the top left	JSX.Element \| (() => JSX.Element)
id	Custom notification id; updates the content when a notification with the same id exists	string
position	Pop-up position, one of `top`, `bottom`, `topLeft`, `topRight`, `bottomLeft`, `bottomRight`	string	`topRight`
showClose	Whether to show the close button	boolean	true
stack	Stack the notifications at one position once there are more than this many; `true` means 3, `false` never stacks. The newest notification at the position decides	boolean \| number	false
style	Inline style of the notification element; an object keyed by CSS property names, or a string	JSX.CSSProperties \| string
theme	Style of background fill, one of `light`, `normal`	string	`normal`
title	Title. A function is rendered inside the notification and can read the context of that position	JSX.Element \| (() => JSX.Element)	''
zIndex	Z-index value. Applied each time a notification is shown.	number	1010
onClick	Called when the notification is clicked; lands on the notification element	(e: MouseEvent) => void
onClose	Called when the notification closes, automatically or manually, once per close	() => void
onCloseClick	Called when the close button is clicked	(id: string) => void

class, style and native attributes and events (such as aria-* and data-*) land on the root div of the notification. Options do not accept ref, since the notification element is managed inside the component. onClick, onClose and onCloseClick keep their key names in the options; pass functions directly.

The global configuration is set before any method call, and takes effect only once:

Notification.config(config)
Notification.resetConfig() restores the global configuration to its defaults; only notifications shown afterwards are affected

Notification.config does not accept direction; text direction is an option of a single notification only.

Properties	Instructions	type	Default
bottom	Bottom, absolute position	number \| string	-
duration	Automatic close delay, no auto-close when set to 0	number(second)	3
left	Left, absolute position	number \| string	-
position	Pop-up position, one of `top`、`bottom`、`topLeft`、`topRight`、`bottomLeft`、`bottomRight`	string	`topRight`
right	Right, absolute position	number \| string	-
stack	Stack the notifications at one position once there are more than this many; `true` means 3, `false` never stacks	boolean \| number	false
top	Top, absolute position	number \| string	-
zIndex	Z-index	number	1010

Globally Destroy:

Notification.destroyAll()

Hook Notification

Notification.useNotification()
Returns a tuple [notification, contextHolder]; place contextHolder in the corresponding node. Notifications created by the hook can access the context where contextHolder is placed. The notification object has the methods info, success, warning, error, open and close; the first five take the options without type, id, zIndex and getPopupContainer and return the notification id, and close(id) closes one manually. Notifications created by the hook use the built-in and global defaults and ignore Notification.config(); close(id) removes the notification after its leave animation without calling onClose. contextHolder is wrapped in a container with data-semi-keep-interactive, so hook notifications stay interactive while a modal layer is open.

Accessibility

ARIA

The role of a notification depends on its type: warning and error are alert; info, success and open are status
status notifications are read by a persistent aria-live="polite" region owned by the list; the notification itself is aria-live="off", and only the text of the title and content is announced. warning and error still announce themselves as alert
The notification's aria-labelledby is marked as the corresponding notification title

Keyboard and Focus

The close button is a native button: focus it with Tab, and activate it with Enter or Space
A notification does not take focus when it appears
When the pointer or keyboard focus enters a notification, its auto-close timer pauses and a stack expands; both resume when it leaves

Content Guidelines

Task completed

400 tasks succeed and 600 failed

Check failed tasks

Title
- Explain in clear and concise language
- Avoid punctuation such as commas, periods, etc.
Text
- On the premise of complete information transmission, try to compress the text to 1-2 sentences
- A detailed description or explanation of the title, rather than a repetition of the title
- Use correct punctuation, commas within sentences and periods between sentences
Operate
- The copy needs to show the specific meaning of the operation

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$animation_duration-notification-show	300ms	出现时-动画持续时间
$animation_function-notification-show	cubic-bezier(0.62, 0.63, 0, 1.13)	出现时-过渡曲线
$animation_delay-notification-show	0ms	出现时-延迟时间
$animation_duration-notification-hide	300ms	消失时-动画持续时间
$animation_function-notification-hide	cubic-bezier(0.62, 0.63, 0, 1.13)	消失时-过渡曲线
$animation_delay-notification-hide	0ms	消失时-延迟时间
$animation_opacity-notification-show	0	出现时-初始透明度
$animation_opacity-notification-hide	0	消失时-结束透明度
$color-notification-bg-default	var(--semi-color-bg-3)	通知背景色
$color-notification_info-icon	var(--semi-color-info)	通知信息图标颜色
$color-notification_warning-icon	var(--semi-color-warning)	通知警告图标颜色
$color-notification_danger-icon	var(--semi-color-danger)	通知危险图标颜色
$color-notification_success-icon	var(--semi-color-success)	通知成功图标颜色
$color-notification_title-text	var(--semi-color-text-0)	通知标题文本颜色
$color-notification_content-text	var(--semi-color-text-1)	通知内容文本颜色
$color-notification_closeBtn-icon	var(--semi-color-text-2)	通知关闭按钮图标颜色
$color-notification_warning_light-bg	var(--semi-color-warning-light-default)	彩色通知警告背景色
$color-notification_warning_light-border	var(--semi-color-warning)	彩色通知警告描边色
$color-notification_success_light-bg	var(--semi-color-success-light-default)	彩色通知成功背景色
$color-notification_success_light-border	var(--semi-color-success)	彩色通知成功描边色
$color-notification_info_light-bg	var(--semi-color-info-light-default)	彩色通知信息背景色
$color-notification_info_light-border	var(--semi-color-info)	彩色通知信息描边色
$color-notification_danger_light-bg	var(--semi-color-danger-light-default)	彩色通知危险背景色
$color-notification_danger_light-border	var(--semi-color-danger)	彩色通知危险描边色
$color-notification_ambient-bg	var(--semi-color-bg-0)	透明背景色叠加层(与bg0保持一致不建议修改)
$width-notification_notice	auto	通知宽度
$width-notification_notice_minWidth	320px	通知最小宽度
$width-notification_notice-icon	$width-icon-extra-large	通知图标宽度
$width-notification_notice-border	1px	通知描边宽度
$spacing-notification_list-margin	0	通知列表外边距
$spacing-notification_list-padding	0	通知列表内边距
$spacing-notification_notice-paddingTop	$spacing-base	通知卡片顶部内边距
$spacing-notification_notice-paddingRight	$spacing-base-tight	通知卡片右侧内边距
$spacing-notification_notice-paddingBottom	$spacing-base	通知卡片底部内边距
$spacing-notification_notice-paddingLeft	$spacing-base-loose	通知卡片左侧内边距
$spacing-notification_notice-margin	$spacing-base-loose	通知卡片外边距
$spacing-notification_notice_title-marginBottom	$spacing-extra-tight	通知卡片标题底部外边距
$spacing-notification_notice_content_wrapper-marginRight	8px	通知卡片内容右侧外边距
$spacing-notification_notice_icon-marginRight	$spacing-base-tight	通知卡片图标右侧外边距
$radius-notification_notice	var(--semi-border-radius-medium)	通知卡片圆角大小
$font-notification_notice_title-fontWeight	$font-weight-bold	通知卡片标题字重
$font-notification_notice_content-fontWeight	$font-weight-regular	通知卡片内容字重