diff --git a/CHANGELOG.md b/CHANGELOG.md
index e57ec14..db4befd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2.2.0] - 2023-09-07
+### Added
+- New component `Toast`.
+
 ## [2.0.1] - 2023-08-22
 ### Fixed
 - Downgrade the `@phosphor-icons/react` version to `2.0.9` because `2.0.10` is not compatible with ES Modules.
@@ -681,6 +685,7 @@ Added `Edit` to `Icon` component
 [#233]: https://github.com/marketgoo/Ola/issues/233
 [#238]: https://github.com/marketgoo/Ola/issues/238
 
+[2.2.0]: https://github.com/marketgoo/Ola/compare/v2.0.1...v2.2.0
 [2.0.1]: https://github.com/marketgoo/Ola/compare/v2.0.0...v2.0.1
 [2.0.0]: https://github.com/marketgoo/Ola/compare/v1.0.0...v2.0.0
 [1.0.0]: https://github.com/marketgoo/Ola/compare/v0.16.1...v1.0.0
diff --git a/package.json b/package.json
index 27712e1..58e3e69 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marketgoo/ola",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "Design System by marketgoo",
   "main": "dist/index.js",
   "styles": "dist/index.css",
@@ -81,4 +81,4 @@
     "dialog-polyfill": "^0.5.3",
     "react-hook-form": "^7.21.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/Toast/__snapshots__/test.js.snap b/src/Toast/__snapshots__/test.js.snap
new file mode 100644
index 0000000..e64e983
--- /dev/null
+++ b/src/Toast/__snapshots__/test.js.snap
@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Default Toast 1`] = `
+<div
+  className="ola_toast is-neutral"
+  style={
+    Object {
+      "--bottom": "unset",
+      "--left": "unset",
+      "--right": "24px",
+      "--top": "24px",
+    }
+  }
+>
+  <div
+    className="ola_toast-container"
+  >
+    <div
+      className="ola_toast-icon"
+    >
+      <svg
+        fill="currentColor"
+        height={24}
+        viewBox="0 0 256 256"
+        width={24}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,168a12,12,0,1,1,12-12A12,12,0,0,1,128,192Zm8-48.72V144a8,8,0,0,1-16,0v-8a8,8,0,0,1,8-8c13.23,0,24-9,24-20s-10.77-20-24-20-24,9-24,20v4a8,8,0,0,1-16,0v-4c0-19.85,17.94-36,40-36s40,16.15,40,36C168,125.38,154.24,139.93,136,143.28Z"
+        />
+      </svg>
+    </div>
+    <div
+      className="ola_toast-content"
+    >
+      <div
+        className="ola_toast-title ola-font-1-bold"
+      >
+        This is the title
+      </div>
+    </div>
+    <div
+      className="ola_toast-close"
+    >
+      <button
+        className="ola_button_icon is-dark"
+        disabled={false}
+        size="small"
+        style={
+          Object {
+            "--base-color": "var(--color-neutral-900)",
+            "--busy-color": "var(--color-neutral-600)",
+            "--disabled-color": "var(--color-neutral-300)",
+            "--shadow-focus": "var(--shadow-focus-neutral)",
+          }
+        }
+      >
+        <svg
+          className="ola_icon is-medium"
+          fillRule="evenodd"
+          height="28"
+          viewBox="0 0 28 28"
+          width="28"
+        >
+          <path
+            d="M22.92 4c.296 0 .55.105.762.314.212.21.318.462.318.758s-.106.55-.318.762l-8.17 8.174 8.17 8.166c.212.212.318.464.318.754 0 .296-.106.549-.318.758-.212.21-.466.314-.762.314s-.547-.103-.753-.31l-8.171-8.166-8.163 8.166c-.206.207-.46.31-.761.31a1.04 1.04 0 0 1-.758-.31A1.02 1.02 0 0 1 4 22.936c0-.301.103-.555.31-.762l8.17-8.166-8.17-8.174A1.026 1.026 0 0 1 4 5.08c0-.296.105-.55.314-.762.21-.212.462-.318.758-.318.295 0 .55.106.761.318l8.163 8.174 8.17-8.174A1.03 1.03 0 0 1 22.92 4z"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/Toast/index.js b/src/Toast/index.js
new file mode 100644
index 0000000..17443e1
--- /dev/null
+++ b/src/Toast/index.js
@@ -0,0 +1,105 @@
+import React from 'react'
+import { default as PT } from 'prop-types'
+import cx from 'classnames'
+import ButtonIcon from '../ButtonIcon'
+import { CheckCircle, Question, XCircle, Warning } from '@phosphor-icons/react'
+
+const Toast = ({
+  title,
+  variant,
+  className,
+  icon,
+  onClose,
+  isClosable,
+  children,
+  top,
+  right,
+  left,
+  bottom,
+}) => {
+  let iconElement = icon
+  if (!iconElement) {
+    const icons = {
+      positive: CheckCircle,
+      negative: XCircle,
+      neutral: Question,
+      warning: Warning,
+    }
+    const DefaultIcon = icons[variant]
+
+    iconElement = <DefaultIcon size={24} weight="fill" />
+  }
+
+  const styles = cx(
+    'ola_toast',
+    `is-${variant}`,
+    className
+  )
+  return (
+    <div className={styles} style={{
+      '--top': top,
+      '--right': right,
+      '--left': left,
+      '--bottom': bottom
+    }}>
+      <div className='ola_toast-container'>
+        <div className='ola_toast-icon'>
+          {iconElement}
+        </div>
+        <div className='ola_toast-content'>
+          {title && <div className="ola_toast-title ola-font-1-bold">{title}</div>}
+          {children && <div className="ola_toast-description">{children}</div>}
+        </div>
+        {isClosable && <div className='ola_toast-close'><ButtonIcon
+          icon="close"
+          size="small"
+          variant="dark"
+          onClick={onClose}
+        /></div>}
+      </div>
+    </div>
+  )
+}
+
+
+Toast.defaultProps = {
+  variant: 'neutral',
+  top: '24px',
+  right: '24px',
+  left: 'unset',
+  bottom: 'unset',
+  isClosable: true
+}
+
+Toast.propTypes = {
+  title: PT.string,
+  children: PT.oneOfType([
+    PT.string,
+    PT.node,
+    PT.arrayOf(PT.node)
+  ]),
+  /** Name of the icon in this lib (see Ola Icon), or a svg direcly **(preferred a Phosphor Icon)** */
+  icon: PT.oneOfType([
+    PT.string,
+    PT.shape({
+      type: PT.oneOf(['svg']),
+    }),
+    PT.node,
+    PT.arrayOf(PT.node)
+  ]),
+  /** Toast variant */
+  variant: PT.oneOf(['warning', 'positive', 'negative', 'neutral']),
+  /** Extra className */
+  className: PT.string,
+  /** closable */
+  isClosable: PT.bool,
+  /** Close event */
+  onClose: PT.func,
+  /** Positions */
+  top: PT.string,
+  bottom: PT.string,
+  left: PT.string,
+  right: PT.string,
+}
+
+export default Toast
\ No newline at end of file
diff --git a/src/Toast/stories.js b/src/Toast/stories.js
new file mode 100644
index 0000000..9445fea
--- /dev/null
+++ b/src/Toast/stories.js
@@ -0,0 +1,68 @@
+import React from 'react'
+import Toast from './'
+import Button from '../Button'
+import { MegaphoneSimple } from '@phosphor-icons/react'
+
+
+export default {
+  title: 'Toast',
+  component: Toast,
+  args: {
+    title: 'This is a Toast 🎉',
+  },
+}
+
+export const Positive = (args) => (
+  <Toast {...args}>
+    <p>You can include some info message here! </p>
+  </Toast>
+)
+Positive.args = {
+  variant: 'positive'
+}
+
+
+export const Negative = (args) => (
+  <Toast {...args}>
+    <p>You can include some info message here! </p>
+  </Toast>
+)
+Negative.args = {
+  variant: 'negative'
+}
+
+
+export const Warning = (args) => (
+  <Toast {...args}>
+    <p>You can include some info message here! </p>
+  </Toast>
+)
+Warning.args = {
+  variant: 'warning'
+}
+
+
+export const Neutral = (args) => (
+  <Toast {...args}>
+    <p>You can include some info message here! </p>
+  </Toast >
+)
+
+export const CustomIcon = (args) => (
+  <Toast {...args}>
+    <p>You can include some info message here! </p>
+    <Button variant="link">Click me</Button>
+  </Toast >
+)
+CustomIcon.args = {
+  icon: <MegaphoneSimple size={24} weight="fill" />,
+}
+
+export const NoTitle = (args) => (
+  <Toast {...args} variant="neutral" >
+    <p style={{ marginTop: '0' }}>You can include some info message here! </p>
+  </Toast >
+)
+NoTitle.args = {
+  title: null
+}
\ No newline at end of file
diff --git a/src/Toast/style.css b/src/Toast/style.css
new file mode 100644
index 0000000..7273c30
--- /dev/null
+++ b/src/Toast/style.css
@@ -0,0 +1,55 @@
+.ola_toast {
+  --background-color: var(--color-neutral-100);
+  --border-color: var(--color-neutral-500);
+  --icon-color: var(--color-neutral-900);
+  position: absolute;
+  top: var(--top);
+  right: var(--right);
+  left: var(--left);
+  bottom: var(--bottom);
+  border-radius: var(--radius-s);
+  border: 1px solid var(--border-color);
+  background-color: var(--background-color);
+  max-width: 620px;
+  width: fit-content;
+  box-shadow: 0px 2px 6px 0.2px rgba(0, 0, 0, 0.2);
+  & .ola_toast-container {
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    padding: var(--size-2);
+  }
+  & .ola_toast-content {
+    margin-right: var(--size-4);
+  }
+  & .ola_toast-icon svg {
+    fill: var(--icon-color);
+  }
+  &.is-positive {
+    --background-color: var(--color-positive-100);
+    --border-color: var(--color-positive-500);
+    --icon-color: var(--color-positive-500);
+  }
+
+  &.is-negative {
+    --background-color: var(--color-negative-100);
+    --border-color: var(--color-negative-500);
+    --icon-color: var(--color-negative-500);
+  }
+  &.is-warning {
+    --background-color: var(--color-warning-100);
+    --border-color: var(--color-warning-500);
+    --icon-color: var(--color-warning-500);
+  }
+
+  & .ola_toast-close {
+    position: absolute;
+    right: var(--size-1);
+    top: var(--size-1);
+    margin-left: var(--size-1);
+  }
+  & .ola_toast-icon {
+    margin-right: var(--size-1);
+  }
+}
diff --git a/src/Toast/test.js b/src/Toast/test.js
new file mode 100644
index 0000000..6bb3992
--- /dev/null
+++ b/src/Toast/test.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import Toast from './'
+import renderer from 'react-test-renderer'
+
+it('Default Toast', () => {
+  const tree = renderer.create(<Toast variant="neutral" title="This is the title" />).toJSON()
+  expect(tree).toMatchSnapshot()
+})
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ef3b397..49d5358 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,63 +1,64 @@
-@import './variables.css';
-@import './defaults.css';
+@import "./variables.css";
+@import "./defaults.css";
 
 /* Components */
-@import './Accordion/style.css';
-@import './Button/style.css';
-@import './ButtonGroup/style.css';
-@import './ButtonIcon/style.css';
-@import './Check/style.css';
-@import './CheckGroup/style.css';
-@import './Device/style.css';
-@import './Field/style.css';
-@import './Icon/style.css';
-@import './Input/style.css';
-@import './Issue/style.css';
-@import './Keyword/style.css';
-@import './Level/style.css';
-@import './Menu/style.css';
-@import './Metric/style.css';
-@import './Modal/style.css';
-@import './Page/style.css';
-@import './Panel/style.css';
-@import './ProgressBar/style.css';
-@import './ProgressCircle/style.css';
-@import './Score/style.css';
-@import './SearchField/style.css';
-@import './Section/style.css';
-@import './Segment/style.css';
-@import './Segment/SegmentButton/style.css';
-@import './Select/style.css';
-@import './Spinner/style.css';
-@import './SpeedMeter/style.css';
-@import './Switch/style.css';
-@import './Table/style.css';
-@import './Tag/style.css';
-@import './Task/style.css';
-@import './TaskGroup/style.css';
-@import './Thumbnail/style.css';
-@import './Tooltip/style.css';
-@import './TreeList/style.css';
-@import './Kpi/style.css';
-@import './ChartColumn/style.css';
-@import './ChartLine/style.css';
-@import './Tabs/style.css';
-@import './Carousel/style.css';
+@import "./Accordion/style.css";
+@import "./Button/style.css";
+@import "./ButtonGroup/style.css";
+@import "./ButtonIcon/style.css";
+@import "./Check/style.css";
+@import "./CheckGroup/style.css";
+@import "./Device/style.css";
+@import "./Field/style.css";
+@import "./Icon/style.css";
+@import "./Input/style.css";
+@import "./Issue/style.css";
+@import "./Keyword/style.css";
+@import "./Level/style.css";
+@import "./Menu/style.css";
+@import "./Metric/style.css";
+@import "./Modal/style.css";
+@import "./Page/style.css";
+@import "./Panel/style.css";
+@import "./ProgressBar/style.css";
+@import "./ProgressCircle/style.css";
+@import "./Score/style.css";
+@import "./SearchField/style.css";
+@import "./Section/style.css";
+@import "./Segment/style.css";
+@import "./Segment/SegmentButton/style.css";
+@import "./Select/style.css";
+@import "./Spinner/style.css";
+@import "./SpeedMeter/style.css";
+@import "./Switch/style.css";
+@import "./Table/style.css";
+@import "./Tag/style.css";
+@import "./Task/style.css";
+@import "./TaskGroup/style.css";
+@import "./Thumbnail/style.css";
+@import "./Tooltip/style.css";
+@import "./TreeList/style.css";
+@import "./Kpi/style.css";
+@import "./ChartColumn/style.css";
+@import "./ChartLine/style.css";
+@import "./Tabs/style.css";
+@import "./Carousel/style.css";
+@import "./Toast/style.css";
 
 /* Helpers */
-@import './utils/utils.css';
+@import "./utils/utils.css";
 
 /* Layouts */
-@import './layouts/ly-imgContent.css';
-@import './layouts/ly-form.css';
-@import './layouts/ly-columns.css';
-@import './layouts/ly-1nColumns.css';
-@import './layouts/ly-pageCenter.css';
-@import './layouts/ly-asideHeader.css';
-@import './layouts/ly-asideMenu.css';
-@import './layouts/ly-list.css';
+@import "./layouts/ly-imgContent.css";
+@import "./layouts/ly-form.css";
+@import "./layouts/ly-columns.css";
+@import "./layouts/ly-1nColumns.css";
+@import "./layouts/ly-pageCenter.css";
+@import "./layouts/ly-asideHeader.css";
+@import "./layouts/ly-asideMenu.css";
+@import "./layouts/ly-list.css";
 
 /* New layouts */
-@import './layouts/ly-highlight.css';
-@import './layouts/ly-main.css';
-@import './layouts/ly-section.css';
+@import "./layouts/ly-highlight.css";
+@import "./layouts/ly-main.css";
+@import "./layouts/ly-section.css";