Toast

A succinct message that is displayed temporarily.

Preview

Code

ShadButton.outline(
 child: const Text('Add to calendar'),
 onPressed: () {
   ShadToaster.of(context).show(
     ShadToast(
       title: const Text('Scheduled: Catch up'),
       description:
           const Text('Friday, February 10, 2023 at 5:57 PM'),
       action: ShadButton.outline(
         child: const Text('Undo'),
         onPressed: () => ShadToaster.of(context).hide(),
       ),
     ),
   );
 },
),

Simple

Preview

Code

ShadButton.outline(
 child: const Text('Show Toast'),
 onPressed: () {
   ShadToaster.of(context).show(
     const ShadToast(
       description: Text('Your message has been sent.'),
     ),
   );
 },
),

With Title

Preview

Code

ShadButton.outline(
 child: const Text('Show Toast'),
 onPressed: () {
   ShadToaster.of(context).show(
     const ShadToast(
       title: Text('Uh oh! Something went wrong'),
       description:
           Text('There was a problem with your request'),
     ),
   );
 },
),

With Action

Preview

Code

ShadButton.outline(
 child: const Text('Show Toast'),
 onPressed: () {
   ShadToaster.of(context).show(
     ShadToast(
       title: const Text('Uh oh! Something went wrong'),
       description:
           const Text('There was a problem with your request'),
       action: ShadButton.outline(
         child: const Text('Try again'),
         onPressed: () => ShadToaster.of(context).hide(),
       ),
     ),
   );
 },
),

Destructive

Preview

Code

ShadButton.outline(
  child: const Text('Show Toast'),
  onPressed: () {
    ShadToaster.of(context).show(
      ShadToast.destructive(
        title: const Text('Uh oh! Something went wrong'),
        description:
            const Text('There was a problem with your request'),
        action: ShadButton.destructive(
          child: const Text('Try again'),
          decoration: ShadDecoration(
            border: ShadBorder(
              color: theme.colorScheme.destructiveForeground,
            ),
          ),
          onPressed: () => ShadToaster.of(context).hide(),
        ),
      ),
    );
  },
),