Back to Toast-guidelines

CSS ComponentThe latest version of this package is: 17.0.30-alpha.0, Opens in new window

Toasts display brief, temporary notifications. They are meant to be noticed without disrupting a user's experience or requiring an action to be taken.

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

View repository, Opens in new windowView package, Opens in new window
$ npm i @ids-core/toast@17.0.30-alpha.0
Info message
Preview

Table of Contents

Edit this section, Opens in new window

Usage

Message 
<div class="if toast [info]" data-text="Message">Message</div>
Message 
<div class="if toast info has-icon" data-text="Message">Message</div>
Message 
<div class="if toast warning" data-text="Message">Message</div>
Message 
<div class="if toast warning has-icon" data-text="Message">Message</div>
Message 
<div class="if toast success" data-text="Message">Message</div>
Message 
<div class="if toast success has-icon" data-text="Message">Message</div>
Message 
<div class="if toast error" data-text="Message">Message</div>
Message 
<div class="if toast error has-icon" data-text="Message">Message</div>
Edit this section, Opens in new window

Tokens

All of the tokens can be used as preprocessor and CSS variables

Toast tokens

Name Value Is aliased in
$ids-toast-action-border
 none
$ids-toast-action-background-color
 transparent
$ids-toast-action-margin-left
 auto
$ids-toast-action-padding
 0 0.5rem
$ids-toast-action-border-radius
 0
$ids-toast-action-text-decoration
 underline
$ids-toast-action-position
 relative
$ids-toast-action-after-width
 auto
$ids-toast-action-after-min-width
 3rem
$ids-toast-action-after-height
 3rem
$ids-toast-action-after-background
 transparent
$ids-toast-action-after-position
 absolute
$ids-toast-action-after-top
 50%
$ids-toast-action-after-left
 50%
$ids-toast-action-after-transform
 translate(-50%, -50%)
$ids-toast-close-margin
 0 0 0 0.5rem
$ids-toast-close-padding
 0
$ids-toast-close-height
 1.25rem
$ids-toast-close-width
 1.25rem
$ids-toast-close-border
 none
$ids-toast-close-position
 relative
$ids-toast-close-background-color
 transparent
$ids-toast-close-background-image
 url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Ee remove%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%272.5%27 fill=%27%23331e11%27 stroke=%27%23331e11%27%3E%3Cline fill=%27none%27 stroke=%27%23331e11%27 stroke-miterlimit=%2710%27 x1=%2727%27 y1=%275%27 x2=%275%27 y2=%2727%27/%3E%3Cline fill=%27none%27 stroke=%27%23331e11%27 stroke-miterlimit=%2710%27 x1=%2727%27 y1=%2727%27 x2=%275%27 y2=%275%27/%3E%3C/g%3E%3C/svg%3E')
$ids-toast-close-background-repeat
 no-repeat
$ids-toast-close-background-position
 center center
$ids-toast-close-background-size
 1rem 1rem
$ids-toast-close-after-width
 3rem
$ids-toast-close-after-height
 3rem
$ids-toast-close-after-position
 absolute
$ids-toast-close-after-top
 50%
$ids-toast-close-after-left
 50%
$ids-toast-close-after-transform
 translate(-50%, -50%)
$ids-toast-margin
 0
$ids-toast-max-width
 80vw
$ids-toast-min-width
 15rem
$ids-toast-width
 100%
$ids-toast-opacity
 0
$ids-toast-flex-grow
 0
$ids-toast-flex-shrink
 0
$ids-toast-height
 48px
$ids-toast-position
 fixed
$ids-toast-bottom
 -4rem
$ids-toast-z-index
 500
$ids-toast-transition
 bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1)
$ids-toast-background-color
 transparent
$ids-toast-color-normal
 rgb(51, 30, 17)
$ids-toast-color-inverse
 rgb(250, 249, 247)
$ids-toast-border-radius
 0.375rem
$ids-toast-box-shadow
 0 8px 4px -2px rgba(110,98,94, 0.08), 0 16px 24px rgba(110,98,94, 0.20)
$ids-toast-padding
 8px 24px
$ids-toast-font-size
 1rem
$ids-toast-line-height
 1.5rem
$ids-toast-left
 50%
$ids-toast-transform
 translateX(-50%)
$ids-toast-align-items
 center
$ids-toast-after-position
 absolute
$ids-toast-after-left
 0
$ids-toast-after-right
 0
$ids-toast-after-bottom
 0
$ids-toast-after-top
 0
$ids-toast-after-z-index
 -2
$ids-toast-after-background-color
 rgb(250, 249, 247)
$ids-toast-before-position
 absolute
$ids-toast-before-left
 0
$ids-toast-before-right
 0
$ids-toast-before-bottom
 0
$ids-toast-before-top
 0
$ids-toast-before-z-index
 -1
$ids-toast-before-opacity
 1
$ids-toast-before-background-color
 rgb(250, 249, 247)
$ids-toast-is-open-bottom
 4rem
$ids-toast-is-open-opacity
 1
$ids-toast-emphasized-opacity
 1
$ids-toast-emphasized-background-color
 rgb(51, 30, 17)
$ids-toast-emphasized-close-background-image
 url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Ee remove%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%272.5%27 fill=%27%23FAF9F7%27 stroke=%27%23FAF9F7%27%3E%3Cline fill=%27none%27 stroke=%27%23FAF9F7%27 stroke-miterlimit=%2710%27 x1=%2727%27 y1=%275%27 x2=%275%27 y2=%2727%27/%3E%3Cline fill=%27none%27 stroke=%27%23FAF9F7%27 stroke-miterlimit=%2710%27 x1=%2727%27 y1=%2727%27 x2=%275%27 y2=%275%27/%3E%3C/g%3E%3C/svg%3E')
$ids-toast-info-opacity
 0.5
$ids-toast-info-background-color
 rgb(76, 176, 211)
$ids-toast-success-opacity
 0.5
$ids-toast-success-background-color
 rgb(135, 199, 186)
$ids-toast-warning-opacity
 0.5
$ids-toast-warning-background-color
 rgb(252, 199, 79)
$ids-toast-error-opacity
 0.5
$ids-toast-error-background-color
 rgb(255, 133, 105)
Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

16.0.0 (2023-01-10)

⚠ BREAKING CHANGES

  • The info card component now has rounded corners - 12px

  • toast no longer has icons and default variation changed

  • Toast component now has rounded corners - 6px.

  • Merged PR 101608: feat(info-card): VID update (fc3d421), closes #686982 #686982

  • Merged PR 101683: feat(toast): made VID updates (d9abc7c), closes #705744 #705744

  • Merged PR 100951: feat(toast): style update for toast (1f2f65c), closes #686989 #686989

14.22.2 (2022-05-03)

Miscellaneous chores

  • package locks: update package locks (813eac7)

14.20.1 (2022-04-19)

Miscellaneous chores

  • changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
  • changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270

14.18.3 (2022-04-13)

Bug Fixes

  • changelog: generate new CHANGELOG.md files for root and packages (349fda4) , closes #586063 . We regenerate the files to include all relevant commits and to use conventional-commits at 100%

14.16.0 (2022-04-07)

Bug Fixes

  • 🐛 Add missing imports for global CSS Variables (fbf6f06) , closes #582437

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.1 (2022-02-23)

Bug Fixes

  • 🐛 Add missing imports of typography CSS variables (e716c65) , closes #559412

reinstall (d425056)

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

reinstall (147df55)

  • use correct versions (f1b5deb)

  • Add engines for all packages (e95dfff)

reinstall (afce1f2)

reinstall (67f3140)

  • Add changelog.md to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

reinstall (885c74b)

  • fix changelogs manually (b1232b4)

reinstall (545a069)

reinstall (e149c2c)

13.12.3 (2021-11-09)

⚠ BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from @if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core
  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site. Please update any saved links!
  • 🧨 Navigation structure has now changed. Please see release notes!

Documentation Updates

  • ✏️ Make variations tables more condensed (4344a3a)

  • ✏️ Move position of the quick links (5cb0897)

  • ✏️ Remove unneeded margins for shortcuts (36c7e8d)

  • ✏️ Separate out CSS documentation (1a81eb8) , closes #467386

  • ✏️ Update links (82bfa1a)

  • ✏️ Update links and change navigation structure (0bfd27d) , closes #490579

  • ✏️ Use correct js references in examples/dev/demo (f41c249)

Code Refactoring

  • 💡 Categorize components (9965266) , closes #490579

  • 💡 Reduce spacing tokens, use correct size tokens (97aa461)

  • 💡 Rename scope and repository (3ea5423)

  • 💡 Use new navigation structure for documentation (415aee5) , closes #490579

  • another change in the structure (38a0d2e)

Miscellaneous chores

bootstrap (6fc1ed8)

  • fix all old references to util (d57bf17)

  • prepare for merge (0184490)

reinstall (da80dba)

  • Rename scope and repo (257684e)

  • use correct version for utils (49e72d9)

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

  • 🐛 Complete the pseudo-element fix (1dcee2c)

13.7.0 (2021-09-22)

Documentation Updates

  • ✏️ Update linking layout and naming (15c383b)

13.6.3 (2021-09-17)

Bug Fixes

13.6.0 (2021-09-08)

Documentation Updates

  • Use default shortcut listing for demo links (a746602)

bootstrap (d23e139)

  • 🤖 Use correct order for diff (cc6a4fd)

12.14.1 (2021-08-12)

Miscellaneous chores

  • 🤖 Add ci task to package.json without tests (21222e0) , closes #457627

12.13.1 (2021-08-11)

Bug Fixes

  • 🐛 Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621

  • 🤖 Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"

12.12.0 (2021-08-09)

Features

  • 🎸 Add new component Toast (d1e4b1c) , closes #414895 . Also added webcomponent for Toast

Miscellaneous chores

  • 🤖 Add demo and dev files for toast (6a904d5)

  • 🤖 Reinstall (e660696)

Edit this section, Opens in new window
Contact us, Opens in new window