Hi @bhaveshraja, I'm tightening up the toast (the little pop-up notification) in our kit and want to settle the defaults with you.
For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent), or whether it should be adjustable depending on where it's used?
-
Where it appears. Toasts show up pinned to the bottom-right corner, stacked with a small gap between them, at a fixed width of about 340px. Should that always be the spot, the stacking, and the width, or do you want it to be able to come from other corners?
-
The little status icon on the left. Each toast leads with a small round icon coloured by its mood: green for success, red for danger, blue for info, amber for warning, grey for neutral. Should those exact colours and that left placement always hold? And is the icon the only coloured part (the box, border, and text stay neutral)?
-
The title and description text. The title is our normal 14px in a medium weight, and the description sits just under it in a slightly smaller 13px muted grey. Should that pairing always look the same?
-
The close button. There's a small dismiss "x" tucked in the top-right corner that highlights on hover. Should every toast carry that, in that spot, always?
-
The card itself. The toast sits on our raised card surface with rounded corners, a border, a shadow, and a set amount of inner padding. Should that surface always look this way?
-
The fade. Toasts fade out when they leave. Should that always be the exit, or is that something we'd vary?
Anything you mark "always," I'll build into the component. Anything that's "depends," I'll leave open for the team to set. Thanks!
Hi @bhaveshraja, I'm tightening up the toast (the little pop-up notification) in our kit and want to settle the defaults with you.
For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent), or whether it should be adjustable depending on where it's used?
Where it appears. Toasts show up pinned to the bottom-right corner, stacked with a small gap between them, at a fixed width of about 340px. Should that always be the spot, the stacking, and the width, or do you want it to be able to come from other corners?
The little status icon on the left. Each toast leads with a small round icon coloured by its mood: green for success, red for danger, blue for info, amber for warning, grey for neutral. Should those exact colours and that left placement always hold? And is the icon the only coloured part (the box, border, and text stay neutral)?
The title and description text. The title is our normal 14px in a medium weight, and the description sits just under it in a slightly smaller 13px muted grey. Should that pairing always look the same?
The close button. There's a small dismiss "x" tucked in the top-right corner that highlights on hover. Should every toast carry that, in that spot, always?
The card itself. The toast sits on our raised card surface with rounded corners, a border, a shadow, and a set amount of inner padding. Should that surface always look this way?
The fade. Toasts fade out when they leave. Should that always be the exit, or is that something we'd vary?
Anything you mark "always," I'll build into the component. Anything that's "depends," I'll leave open for the team to set. Thanks!