# AtomToast

> AtomToast is a component that renders an empty floating box.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/toast/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,toast)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-toast?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-toast)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Atoast&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Atoast)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-toast)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/toast/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-toast --save
```

## Usage

### Basic usage

```js
import AtomToast, {
  atomToastPositions,
  atomToastAutoCloseTimes
} from '@s-ui/react-atom-toast';

return (
  <AtomToast
    position={atomToastPositions.topRight}
    autoCloseTime={atomToastAutoCloseTimes.short}
  >
    <span>lorem ipsum</span>
  </AtomToast>
);
```

> **Find full description and more examples in the [demo page](#).**


> AtomToast is a component that renders an empty floating box. 

@s-ui/react-atom-toast

> AtomToast is a component that renders an empty floating box.

schibstedspain

francisco.ruiz.lloret

andresadv

azahara

javiauso

xavi.murcia

alfredo.zimperz

isabelgomez87

nacho_torrella

hpintos_adevinta

oriol.puig

marian.lucaci

pablogs

alverd004

oscar.gomez

a.ferrer

alejandro.ferrante

ivanmlaborda

jenifer.lopez

pa.chruscinski.ext

salvador.juan

cristhianb

gfabregoadv

izeller

ignacio_navarro

oscar_ramirez

jordi.munoz

aitor.rodriguez

luis-garrido

joanleon-adv

alfredo.arronte

belen.santos

estefania_garcia

ferrangbtw

davidmartin2108

alisa_bayanova

beatrizip

pablo.rey-adevinta

sergiocollado

alex.castells

giovanny.sayas.ext

david.cuadrado.ext

patricio.sartore

marc.benito

arturo.vicente

sergio.escano

cristina.rodriguez.duque

pol.valls

ruben-martin

dann41

emiliovz

adria.velardos

diegomr

andresin87.adevinta

carlosvillu-adevinta

ignacio.rodriguez

luz_adv

xavi_ballestar

jamile.radloff

sergi.quintela

ferran.simon

david.nieto

carlos.gonzalezl

carolina.mallo.ext

oscar-raig-adevinta

victor.perez.adevinta

sziauberyte

mariapaula.forero.ext

frandelacasa-adevinta

albert.peiro

daniel.perez.ext

victoria.pasichnyk.ext

thomas.page.ext

sebastian.badea.adevinta

sendami.luque.ext

alfredo.narvaez

miriam-gil

arnau.guell

sergi.martinez.adevinta

guillemgc3

frontend-jobs

javiermiguel

candymd

atilioscolaroadv

crotundu.adevinta

florinz

denis_z

anya_ok

hector-prieto-moreno

mirceasima-adv

biancamateiu-adv

react-atom-toast

(Experimental) An ambiguous license classifier was found.

What is an ambiguous license classifier?

Ambiguous License Classifier

Source files are encoded using a non-standard text encoding.

What is bad text encoding?

Bad text encoding

Package version is not a valid semantic version (semver).

What is bad semver?

Bad semver

Package has dependencies with an invalid semantic version. This could be a sign of beta, low quality, or unmaintained dependencies.

What is bad dependency semver?

Bad dependency semver

Source files contain bidirectional unicode control characters. This could indicate a Trojan source supply chain attack. See: trojansource.codes for more information.

What are bidirectional unicode control characters?

Bidirectional unicode control characters

This package has multiple bin scripts with the same name. This can cause non-deterministic behavior when installing or could be a sign of a supply chain attack.

What is bin script confusion?

Bin script confusion

This Chrome extension includes content scripts that execute JavaScript on specified websites.

What are Chrome extension content scripts?

Chrome: Content Script

This Chrome extension requests host permissions to access specific websites or domains.

What are Chrome extension host permissions?

Chrome: Host Permission

This Chrome extension requests permissions to access browser APIs, user data, or system features.

What are Chrome extension permissions?

Chrome: Permission

This Chrome extension requests wildcard host permissions that grant broad access to websites.

What are Chrome extension wildcard host permissions?

Chrome: Wildcard Host Permission

Semantic versions published out of chronological order.

What is a chronological version anomaly?

Chronological version anomaly

Project maintainer's SSH key has been compromised.

What is a compromised SSH key?

Compromised SSH key

(Experimental) Copyleft license information was found.

What do I need to know about license files?

Copyleft License

Contains a Critical Common Vulnerability and Exposure (CVE).

What is a critical CVE?

Title

Critical CVE

Contains a high severity Common Vulnerability and Exposure (CVE).

What is a CVE?

High CVE

Uses debug, reflection and dynamic code execution features.

What is debug access?

Debug access

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

What is a deprecated package?

Deprecated

(Experimental) Contains a known deprecated SPDX license exception.

What is a deprecated SPDX exception?

Deprecated SPDX exception

(Experimental) License is deprecated which may have legal implications regarding the package's use.

What is a deprecated license?

Deprecated license

Package name is similar to other popular packages and may not be the package you want.

What is a typosquat?

Possible typosquat attack

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

What is dynamic require?

Dynamic require

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

What is an empty package?

Empty package

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

What is environment variable access?

Environment variable access

(Experimental) Something was found which is explicitly marked as unlicensed.

Explicitly Unlicensed Item

Package optionally loads a dependency which is not specified within any of the package.json dependency fields. It may inadvertently be importing dependencies specified by other packages.

What are extraneous dependencies?

Name

Extraneous dependency

Contains a dependency which resolves to a file. This can obfuscate analysis and serves no useful purpose.

What are file dependencies?

File dependency

Accesses the file system, and could potentially read sensitive data.

What is filesystem access?

Filesystem access

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

What are wildcard dependencies?

Wildcard dependency

Generic ad-hoc alert, uploaded by user or produced by system diagnostics

Alert title

Generic alert

An input argument to this GitHub Action is being exported as an environment variable. If a user of this action passes untrusted input, it could be used in an insecure manner by subsequent workflow steps.

What are GitHub Actions taint flows?

GitHub Actions: Input argument exported as environment variable

An input argument to this GitHub Action is being passed back as an output. If a user of this action passes untrusted input, it could be used in an insecure manner by consuming workflows.

GitHub Actions: Input argument passed back as output

An input argument to this GitHub Action flows into a dangerous sink (such as shell command execution). This could allow a malicious user to inject commands or exploit the action.

GitHub Actions: Input argument flows to dangerous sink

A GitHub context variable (such as issue title, PR description, or comment body) is being exported as an environment variable. These context values are user-controlled and could be exploited by subsequent workflow steps.

GitHub Actions: GitHub context variable exported as environment variable

A GitHub context variable (such as issue title, PR description, or comment body) is being passed back as an output. These context values are user-controlled and could be exploited by consuming workflows.

GitHub Actions: GitHub context variable passed back as output

A GitHub context variable (such as issue title, PR description, or comment body) flows into a dangerous sink (such as shell command execution). This is a critical security issue that could allow command injection or code execution attacks.

GitHub Actions: GitHub context variable flows to dangerous sink

An environment variable flows into a dangerous sink (such as shell command execution). If this environment variable comes from an untrusted source, it could be exploited to inject commands.

GitHub Actions: Environment variable flows to dangerous sink

Contains a dependency which resolves to a remote git URL. Dependencies fetched from git URLs are not immutable and can be used to inject untrusted code or reduce the likelihood of a reproducible install.

What are git dependencies?

Git dependency

@s-ui/react-atom-toast

AtomToast

Installation

Usage

Basic usage

Keywords

Related posts

@s-ui/react-atom-toast

AtomToast

Installation

Usage

Basic usage

Keywords

Related posts

OWASP 2025 Top 10 Adds Software Supply Chain Failures, Ranked Top Community Concern

9 Malicious NuGet Packages Deliver Time-Delayed Destructive Payloads