Apq/semi-design: 快速搭建美观的 React 应用。由抖音前端与 UED 团队维护。 @ 73022d6c8ab81825c3a4caf51a87bf419d3cacb2

localeCode: en-US order: 75 category: Feedback title: Toast subTitle: Toast icon: doc-toast width: 65%

brief: Toast component is used to give timely feedback to user's operations. It could be the result feedback of the operation, such as success, failure, error, warning, etc.

Demos

How to import

import { Toast } from '@douyinfe/semi-ui';

Basic Usage

import React from 'react';
import { Toast, Button } from '@douyinfe/semi-ui';
import { throttle } from 'lodash-es';

function Demo() {
    const opts = {
        content: 'Hi, Bytedance dance dance',
        duration: 3,
    };

    const handleClose = () => {
        throttled.cancel();
    };
    const throttleOpts = {
        content: 'Hi, Bytedance dance dance',
        duration: 10,
        onClose: handleClose,
    };
    const throttled = throttle(() => Toast.info(throttleOpts), 10000, { trailing: false });

    return (
        <div>
            <Button onClick={() => Toast.info(opts)}>Display Toast</Button>
            <br />
            <br />
            <Button onClick={throttled}>Throttled Toast</Button>
        </div>
    );
}
render(Demo);

If there are scenarios in your website where multiple Toasts pop up at the same time, such as a request failure interceptor, it is recommended to use the stacking function below.

Other Types

Use different methods to show different Toast including success, warning, error and info.

import React from 'react';
import { Toast, Button } from '@douyinfe/semi-ui';

function Demo() {
    let opts = {
        content: 'Hi, Bytedance dance dance',
        duration: 3,
    };

    return (
        <>
            <Button style={{ color: `var(--semi-color-success)` }} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
            <br />
            <br />
            <Button type="warning" onClick={() => Toast.warning(opts)}>
                Warning
            </Button>
            <br />
            <br />
            <Button type="danger" onClick={() => Toast.error(opts)}>
                Error
            </Button>
        </>
    );
}
render(Demo);

Colored Background

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

import React from 'react';
import { Toast, Button } from '@douyinfe/semi-ui';

function Demo() {
    let opts = {
        content: 'Hi, Bytedance dance dance',
        duration: 3,
        theme: 'light',
    };

    return (
        <>
            <Button onClick={() => Toast.info(opts)}>Info</Button>
            <br />
            <br />
            <Button style={{ color: `var(--semi-color-success)` }} onClick={() => Toast.success(opts)}>Success</Button>
            <br />
            <br />
            <Button type="warning" onClick={() => Toast.warning(opts)}>
                Warning
            </Button>
            <br />
            <br />
            <Button type="danger" onClick={() => Toast.error(opts)}>
                Error
            </Button>
        </>
    );
}
render(Demo);

Stacking styles

You can apply stacking styles to multiple Toasts on the same screen through the stack property, and Hover expands them. （>=2.42.0）

import { Toast, Typography, Button } from '@douyinfe/semi-ui';

()=>{
    
    const opts = {
        content: 'Hi, Bytedance dance dance',
        duration: 10,
        stack: true,
    };

    
    return <Button onClick={() => {
         Toast.info(opts)
    }}>Click multiple times</Button>
}

Custom Children with Link

Informational feedback

import React from 'react';
import { Toast, Typography, Button } from '@douyinfe/semi-ui';

function Demo() {
    const { Text } = Typography;

    let opts = {
        content: (
            <span>
                <Text>Hi, Bytedance dance dance</Text>
                <Text link style={{ marginLeft: 12 }}>
                    More Info
                </Text>
            </span>
        ),
        duration: 3,
    };

    let multiLineOpts = {
        content: (
            <>
                <div>Hi, Bytedance dance dance</div>
                <div style={{ marginTop: 8 }}>
                    <Text link>More Info</Text>
                    <Text link style={{ marginLeft: 20 }}>
                        Later
                    </Text>
                </div>
            </>
        ),
        duration: 3,
    };

    return (
        <>
            <Button onClick={() => Toast.info(opts)}>Display Toast</Button>
            <br />
            <br />
            <Button onClick={() => Toast.info(multiLineOpts)}>Display Multi-line Toast</Button>
        </>
    );
}
render(Demo);

Delay

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

import React from 'react';
import { Toast, Button } from '@douyinfe/semi-ui';

function Demo() {
    let opts = {
        content: 'Hi, Bytedance dance dance',
        duration: 10,
    };

    return <Button onClick={() => Toast.info(opts)}>Close After 10s</Button>;
}
render(Demo);

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.

import React, { useState } from 'react';
import { Toast, Button } from '@douyinfe/semi-ui';

function Demo() {
    const [toastId, setToastId] = useState();
    function show() {
        if (toastId) {
            return;
        }
        let id = Toast.info(opts);
        setToastId(id);
    }
    function hide() {
        Toast.close(toastId);
        destroy();
    }
    function destroy() {
        setToastId(null);
    }
    let opts = {
        content: 'Not auto close',
        duration: 0,
        onClose: destroy,
    };
    return (
        <>
            <Button type="primary" onClick={show}>
                Show Toast
            </Button>
            <br />
            <br />
            <Button type="primary" onClick={hide}>
                Hide Toast
            </Button>
        </>
    );
}

render(Demo);

Update Toast Content

Use unique Toast id to update toast content.

import React, { useState } from 'react';
import { Toast, Button } from '@douyinfe/semi-ui';

function Demo() {
    function show() {
        const id = 'toastid';
        Toast.info({ content: 'Update Content By Id', id });
        setTimeout(() => {
            Toast.success({ content: 'Id By Content Update', id });
        }, 1000);
    }

    return (
        <Button type="primary" onClick={show}>
            Update Content By Id
        </Button>
    );
}

render(Demo);

Destroy all

Globally Destroy (>= 0.25.0):

Toast.destroyAll()

Consume Context

You could use Toast.useToast to create a contextHolder that could access context. Created toast will be inserted to where contextHolder is placed.

import React from 'react';
import { Toast, Button } from '@douyinfe/semi-ui';

const ReachableContext = React.createContext();

function Demo(props = {}) {
    const [toast, contextHolder] = Toast.useToast();
    const config = {
        duration: 0,
        title: 'This is a success message',
        content: <ReachableContext.Consumer>{name => `ReachableContext: ${name}`}</ReachableContext.Consumer>,
    };

    return (
        <ReachableContext.Provider value="Light">
            <div>
                <Button
                    onClick={() => {
                        toast.success(config);
                    }}
                >
                    Hook Toast
                </Button>
            </div>
            {contextHolder}
        </ReachableContext.Provider>
    );
}

render(Demo);

Create Toast with different configurations

Commonly used to override global configuration

ToastFactory.create(config) => Toast
If you need Toast with different configs in your application, you can use ToastFactory.create(config)to create a new Toast (>= 1.23):

import React from 'react';
import { Button, ToastFactory } from '@douyinfe/semi-ui';

function Demo() {
const ToastInCustomContainer = ToastFactory.create({
    getPopupContainer: () => document.getElementById('custom-toast-container'),
});
return (
    <div>
        <Button onClick={() => Toast.info('Toast')}>Default Toast</Button>
        <br />
        <br />
        <Button onClick={() => ToastInCustomContainer.info('Toast in some container')}>
            Toast in custom container
        </Button>
        <div id="custom-toast-container">custom container</div>
    </div>
);
}
render(Demo);

Globally Destroy (>= 0.25.0):

Toast.destroyAll()

Consume Context

Toast.useToast v>=1.2.0
When you need access Context, you could use Toast.useToast to create a contextHolder and insert to corresponding DOM tree. Toast created by hooks will be able to access the context where contextHolder is inserted. Hook toast has following methods: info, success, warning, error, close.

API Reference

The static methods provided are as follows: Display: You can pass in options object or string directly. Methods return the value of toastId: const toastId = Toast.info({ /*...options*/ })

The global configuration is set before any method call, and takes effect only once (>= 0.25.0)

Toast.config(config)

** Show Toast Directly

Toast.info(options || string)
Toast.error(options || string)
Toast.warning(options || string)
Toast.success(options || string)

**info error warning success return the toastId, can be used for manually closing **

Toast.close(toastId) Close Manually

Options

Toast Options supports the following APIs as well as the APIs in Config

Properties	Instructions	type	Default	version
content	Toast content	string	ReactNode	''
icon	Custom icons	ReactNode		0.25.0
showClose	Toggle Whether show close button	boolean	true	0.25.0
textMaxWidth	Maximum width of content	number \| string	450	0.25.0
onClose	Callback function when closing toast	() => void
stack	Whether to stack toast	boolean	false	2.42.0
id	Custom ToastId	number

Config

The following API supports global configuration to change the default configuration of the current Toast

Properties	Instructions	type	Default	version
bottom	Pop-up position bottom	number \| string	-	0.25.0
left	Pop-up position left	number \| string	-	0.25.0
right	Pop-up position right	number \| string	-	0.25.0
top	Pop-up position top	number \| string	-	0.25.0
zIndex	Z-index value	number	1010
theme	Style of background fill, one of `light`, `normal`	string	`normal`	2.54.0
duration	Automatic close delay, no auto-close when set to 0	number	3
getPopupContainer	Specifies the parent DOM, and the bullet layer will be rendered to the DOM, you need to set container and inner .semi-toast-wrapper 'position: relative` This will change the DOM tree position, but not the view's rendering position.	() => HTMLElement \| null	() => document.body	0.34.0

Accessibility

ARIA

The role of Toast is alert

Content Guidelines

Keep it simple
Do not use periods at the end of sentences
Explain using the noun + verb format

✅ Recommended usage	❌ Deprecated usage
Language added	New language has been added successfully
Ticket transfer failed	Can't transfer ticket

Provide prompt message for action
- only provide one action
- Don't use actions like "read" like OK, Got it, Dismiss, Cancel

✅ Recommended usage	❌ Deprecated usage
Ticket transfer failed Retry } />	Ticket transfer failed Dismiss } />

index-en-US.md 14 KB

History Raw

brief: Toast component is used to give timely feedback to user's operations. It could be the result feedback of the operation, such as success, failure, error, warning, etc.

Demos

How to import

Basic Usage

Other Types

Colored Background

Stacking styles

Custom Children with Link

Delay

Manual Close

Update Toast Content

Destroy all

Consume Context

Create Toast with different configurations

API Reference

Options

Config

Accessibility

ARIA

Content Guidelines

Design Tokens

index-en-US.md 14 KB History Raw

brief: Toast component is used to give timely feedback to user's operations. It could be the result feedback of the operation, such as success, failure, error, warning, etc.

Demos

How to import

Basic Usage

Other Types

Colored Background

Stacking styles

Custom Children with Link

Delay

Manual Close

Update Toast Content

Destroy all

Consume Context

Create Toast with different configurations

API Reference

Options

Config

Accessibility

ARIA

Content Guidelines

Design Tokens

index-en-US.md 14 KB

History Raw