Podo UI

Podo UI

Toast

Toast notification component

Basic Usage

Toasts can be created using the .toast class. They can include an icon, header, body, and close button.

Live Example:
Header
Lorem ipsum dolor sit amet
HTML
<div class="toast">
  <i class="icon-info"></i>
  <div class="toast-content">
    <div class="toast-header">Header</div>
    <div class="toast-body">Lorem ipsum dolor sit amet</div>
  </div>
  <button aria-label="Close"></button>
</div>

Style Properties

Toasts provide various styles by combining border and long properties:

Border Property

  • border=false (default): 4px thick accent border
  • border=true (.border): 1px full outline only (no accent border)

Long Property

  • long=false (default): Vertical layout, 4px accent border on top when border=false
  • long=true (.long): Horizontal layout, 4px accent border on left when border=false

border=false - Accent Border

The default style displays a 4px thick accent border on top.

Live Example:
Header
Lorem ipsum dolor sit amet
HTML
<!-- border=false (4px accent border) -->
<div class="toast info">
  <i class="icon-info"></i>
  <div class="toast-content">
    <div class="toast-header">Header</div>
    <div class="toast-body">Lorem ipsum dolor sit amet</div>
  </div>
  <button aria-label="Close"></button>
</div>

border=true - Full Outline

Adding the .border class displays only a 1px full outline (no accent border).

Live Example:
Header
Lorem ipsum dolor sit amet
HTML
<!-- border=true (1px full outline only) -->
<div class="toast border info">
  <i class="icon-info"></i>
  <div class="toast-content">
    <div class="toast-header">Header</div>
    <div class="toast-body">Lorem ipsum dolor sit amet</div>
  </div>
  <button aria-label="Close"></button>
</div>

Long Style

Adding the .long class changes to horizontal layout, and the border position changes from top to left. Useful when displaying toasts in narrow spaces.

long=true, border=false

Displays a 4px thick accent border on the left.

Live Example:
Lorem ipsum dolor sit amet
HTML
<!-- long=true, border=false (4px accent border on left) -->
<div class="toast long info">
  <i class="icon-info"></i>
  <div class="toast-content">
    <div class="toast-body">Lorem ipsum dolor sit amet</div>
  </div>
  <button aria-label="Close"></button>
</div>

long=true, border=true

Displays only a 1px full outline (no accent border).

Live Example:
File uploaded successfully
HTML
<!-- long=true, border=true (1px full outline only) -->
<div class="toast long border success">
  <i class="icon-check"></i>
  <div class="toast-content">
    <div class="toast-body">File uploaded successfully</div>
  </div>
  <button aria-label="Close"></button>
</div>

Color Variants

Use 6 color variants to convey different messages:

Default

Default notification

Default
border=false (4px accent border)
Default
border=true (1px outline)
long=true, border=false
long=true, border=true

Primary

Primary notification

Primary
border=false (4px accent border)
Primary
border=true (1px outline)
long=true, border=false
long=true, border=true

Info

Informational notification

Info
border=false (4px accent border)
Info
border=true (1px outline)
long=true, border=false
long=true, border=true

Success

Success notification

Success
border=false (4px accent border)
Success
border=true (1px outline)
long=true, border=false
long=true, border=true

Warning

Warning notification

Warning
border=false (4px accent border)
Warning
border=true (1px outline)
long=true, border=false
long=true, border=true

Danger

Danger notification

Danger
border=false (4px accent border)
Danger
border=true (1px outline)
long=true, border=false
long=true, border=true
HTML
<!-- Default -->
<div class="toast default">...</div>

<!-- Info -->
<div class="toast info">...</div>

<!-- Success -->
<div class="toast success">...</div>

<!-- Warning -->
<div class="toast warning">...</div>

<!-- Danger -->
<div class="toast danger">...</div>

Combination Examples

Adding the .long class changes to horizontal layout and displays in one line. Useful when displaying toasts in narrow spaces.

Live Example:
Lorem ipsum dolor sit amet
File uploaded successfully
HTML
<div class="toast long info">
  <i class="icon-info"></i>
  <div class="toast-content">
    <div class="toast-body">Lorem ipsum dolor sit amet</div>
  </div>
  <button aria-label="Close"></button>
</div>

<!-- Long + Border -->
<div class="toast long border success">
  <i class="icon-check"></i>
  <div class="toast-content">
    <div class="toast-body">File uploaded successfully</div>
  </div>
  <button aria-label="Close"></button>
</div>

Simple Message

You can also display only the body without a header:

Live Example:
Lorem ipsum dolor sit amet
File uploaded successfully
HTML
<div class="toast info">
  <i class="icon-info"></i>
  <div class="toast-content">
    <div class="toast-body">Lorem ipsum dolor sit amet</div>
  </div>
  <button aria-label="Close"></button>
</div>

React Component Example

Click the buttons to see various Toast styles:

Using in React

You can use the Toast component in React applications.

1. ToastProvider Setup

First, add the ToastProvider at the top level of your application:

app/layout.tsx
import { ToastProvider } from 'podo-ui';

return function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ToastProvider>
          {children}
        </ToastProvider>
      </body>
    </html>
  );
}

2. Using useToast Hook

Use the useToast hook in your component to display toasts:

component.tsx
import { useToast } from 'podo-ui';

function MyComponent() {
  const { showToast } = useToast();

  const handleClick = () => {
    showToast({
      message: 'Saved!',
      header: 'Success',
      theme: 'success',
      border: false,
      position: 'top-right',
      duration: 3000,
    });
  };

  return <button onClick={handleClick}>Save</button>;
}

3. Toast Options

TypeScript
interface ToastOptions {
  message: string;           // Required: Toast message
  header?: string;           // Optional: Header text (not displayed when long)
  theme?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
  border?: boolean;          // true: 1px full outline, false: 4px accent border (default)
  long?: boolean;            // true: Horizontal layout
  duration?: number;         // Auto-close time (ms), 0 for no auto-close
  width?: string | number;   // Width (default: auto)
  position?: 'top-left' | 'top-center' | 'top-right'
           | 'center-left' | 'center' | 'center-right'
           | 'bottom-left' | 'bottom-center' | 'bottom-right';
}

4. Usage Examples

TypeScript
// border=false (4px accent border)
showToast({
  message: 'File uploaded',
  theme: 'success',
  position: 'top-right',
});

// border=true (1px full outline)
showToast({
  header: 'Notification',
  message: 'You have a new message',
  theme: 'info',
  border: true,
  position: 'bottom-center',
});

// Long style
showToast({
  message: 'Saved',
  theme: 'success',
  long: true,
  position: 'bottom-right',
  duration: 2000,
});

// Custom width
showToast({
  message: 'This is a wide toast',
  width: 400,
  position: 'top-center',
});

// No auto-close
showToast({
  header: 'Important Notice',
  message: 'This message must be closed manually',
  theme: 'warning',
  duration: 0,
  position: 'center',
});

Using in SCSS

You can customize toast styles in SCSS modules:

component.module.scss
@use 'podo-ui/mixin' as *;

.customToast {
  display: flex;
  align-items: flex-start;
  gap: s(3);
  padding: s(4);
  border-radius: r(2);
  background-color: color('bg-elevation-1');
  border: 1px solid color('border');
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  .icon {
    color: color('info');
  }

  .content {
    flex: 1;
  }

  .header {
    font-weight: 600;
    color: color('text-body');
    margin-bottom: s(1);
  }

  .body {
    color: color('text-body');
  }

  .close {
    cursor: pointer;
    color: color('text-action');

    &:hover {
      color: color('text-action-hover');
    }
  }
}