How to reduce size/length of Toast / Vibe design system

Hey!
You just need to provide className prop and determine width in the corresponding class

Thank you @SergeyRo!

Hi @SergeyRo ,

Thanks for the response!

I have used className=“monday-storybook-alert-banner_small-container”. But still the size is not reduced.

<Toast open={toastSuccOpen} type={Toast.types.POSITIVE} actions={actions} onClose={onCloseCallback} autoHideDuration={1000} className="monday-storybook-alert-banner_small-container">
                 successfully deleted 1 item {JSON.stringify(toastSuccOpen)}
            </Toast>

Hello @Priya,

What did you use in your CSS for that class?

Are you sure the CSS file is connected with your file?

Hi @Matias.Monday,

I have imported the CSS file at the top.

//Styles  
import "../App.css";
import "./authorization.css";
import "monday-ui-react-core/dist/main.css";

Hello @Priya,

You need to style the component yourself using a class.
For example, if you are using the class in the previous code you posted, which is monday-storybook-alert-banner_small-container, then in your App.css, you will have a block of code like this below which will modify the width of that element.

.monday-storybook-alert-banner_small-container {
  width: 100px;
}

Here is a link to learn more about CSS

Thank you @kolaai!

@Priya is that what you were doing or where you missing that part?

Hi @kolaai & @Matias.Monday,

Thanks for your timely response!

The Above code is working fine.

Happy to hear that!

Thank you again @kolaai !