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

monday Apps & Developers
1

Hi ,

I am using toast component in my App.

I need to reduce length/size of the Toast. Please refer the screenshot below.

image
image1920Ă—1080 233 KB 

 <Toast open={toastErrOpen} type={Toast.types.NEGATIVE} actions={actions} onClose={onCloseErrCallback} autoHideDuration={1000} className="mondaystorybook-toast_box">
                We successfully deleted 1 item
 </Toast>

Could you please help on this?

3

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

1 Like
4

Thank you @SergeyRo!

5

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>
6

Hello @Priya,

What did you use in your CSS for that class?

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

7

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";
8

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

1 Like
9

Thank you @kolaai!

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

10

Hi @kolaai & @Matias.Monday,

Thanks for your timely response!

The Above code is working fine.

1 Like
11

Happy to hear that!

Thank you again @kolaai !