Design System: Add toast

[mica000]

https://www.figma.com/file/2MLHeIeL6XPVi3Tc2DfFCr/%E2%9D%96-Leather-%E2%80%93-Design-System?type=design&node-id=12108-63748&mode=design&t=4atOHlKRSOr96Vb7-4

[kyranjamie]

And this a callout per https://www.radix-ui.com/themes/docs/components/callout

[mica000]

@kyranjamie are you sure, this looks and behaves more like https://www.radix-ui.com/primitives/docs/components/toast

[kyranjamie]

Looks like, but doesn't behave like. A toast is a global element which often appears over other content in top-right/bottom-right of screen (not inline like displayed here).

[mica000]

Sorry this was lacking further description. The behavior or for this component is indeed to appear over the content and then disappear

[markmhendrickson]

@mica000 to provide standard positioning guidance, across modal and full width tab formats

[mica000]

@fabric-8 could you also take a look into this one? It's missing the visualisation of how toasters would work on different sizes

[fabric-8]

@mica000 I think the confusion here (toast vs. callout) partially stems from this looking quite like a callout - Mind if I suggest a slightly different design looking more like a toast floating on top?

[mica000]

@mica000 I think the confusion here (toast vs. callout) partially stems from this looking quite like a callout - Mind if I suggest a slightly different design looking more like a toast floating on top?

Of course not :D All yours!

[fabric-8]

→ Updated toast specs incl. guidance for animations and placement can be found here.