Toast component - Showcase
Color
Icon
Default icon
Lorem ipsum dolor sit amet.
With icon override
Lorem ipsum dolor sit amet.
With animated icon
Lorem ipsum dolor sit amet.
Without icon
Lorem ipsum dolor sit amet.
Content
A simple title
A simple description text
A toast with a title and no description text.
A toast with no title and just a description text
A toast with a very long title and a long description text that should go on multiple lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque erat elit, lacinia at magna
eget, porttitor lobortis nulla.
A toast with a rich description (HTML)
Using the
A.Description
contextual component it's possible to have content that contains HTML tags, like
strong text
and
emphasized text
as well as
code,
preand inline links.
Multiple lines of description using more than one 'description' contextual component
This is the first line of description, yielded to a
A.Description
contextual component.And this is the second line of description, yielded to another
A.Description
contextual component.A toast with extra/custom content
In special cases, you can pass extra content to the toast using the
A.Generic
contextual component.