![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1254 1254" role="img" aria-label="Qeet logo">%0A <title>Qeet</title>%0A <defs>%0A %3C!-- Mask carves a true transparent hole through the bowl -->%0A <mask id="qBowlHole" maskUnits="userSpaceOnUse">%0A <rect width="1254" height="1254" fill="%23FFFFFF"/>%0A <path fill="%23000000" d="%0A M669.964722,338.242981%0A C714.535645,351.395386 751.471863,375.501129 779.470825,412.042328%0A C814.503479,457.763184 828.529907,509.627594 821.508301,567.354248%0A C815.037964,614.333862 796.163635,655.232849 763.035339,688.671509%0A C715.514587,736.637695 657.793396,758.218994 590.453552,749.188904%0A C504.824402,737.706116 436.176788,675.264038 417.429352,590.163330%0A C398.281219,503.243683 423.564056,429.604553 493.036591,373.787628%0A C542.333557,334.180542 599.844727,323.023224 661.836060,336.080780%0A C664.430725,336.627319 666.966248,337.454285 669.964722,338.242981 z"/>%0A </mask>%0A </defs>%0A%0A %3C!-- Bowl + descender curve (dark) with hole masked out -->%0A <path mask="url(%23qBowlHole)" fill="%230A0A0A" d="%0A M821.791687,894.018799%0A C803.326172,903.166809 785.336975,913.478882 766.312927,921.261658%0A C682.977112,955.354797 597.577454,960.575989 510.776794,936.458923%0A C427.137451,913.220154 358.319214,867.022827 303.655487,799.771240%0A C259.619385,745.594543 231.852402,683.929749 219.855377,615.135681%0A C205.246201,531.363037 215.390701,450.569489 250.641022,373.361603%0A C287.752838,292.076569 346.057434,229.640503 423.650269,185.486679%0A C489.535767,147.994873 560.685242,131.387634 636.355042,134.347610%0A C667.607117,135.570114 698.193970,141.258041 728.247498,149.842102%0A C729.508179,150.202209 730.704346,150.788620 731.848389,151.967499%0A C730.448730,152.746170 729.071960,153.118286 727.822754,152.863968%0A C709.200012,149.072678 691.179749,151.872894 674.192566,159.455490%0A C609.452271,188.353607 598.711670,273.967438 647.019897,320.610840%0A C654.005493,327.355682 662.567566,332.467743 669.964722,338.242981%0A C666.966248,337.454285 664.430725,336.627319 661.836060,336.080780%0A C599.844727,323.023224 542.333557,334.180542 493.036591,373.787628%0A C423.564056,429.604553 398.281219,503.243683 417.429352,590.163330%0A C436.176788,675.264038 504.824402,737.706116 590.453552,749.188904%0A C657.793396,758.218994 715.514587,736.637695 763.035339,688.671509%0A C796.163635,655.232849 815.037964,614.333862 821.583984,568.151245%0A C821.813477,570.053894 822.135437,571.531555 822.135864,573.009338%0A C822.152954,633.669861 822.122437,694.330322 822.139038,754.990845%0A C822.151672,800.985046 822.219727,846.979187 822.106567,893.217285%0A C821.897339,893.647034 821.844543,893.832886 821.791687,894.018799 z"/>%0A%0A %3C!-- Bright orange (brand) -->%0A <path fill="%23F26D0E" d="%0A M822.263123,892.973389%0A C822.219727,846.979187 822.151672,800.985046 822.139038,754.990845%0A C822.122437,694.330322 822.152954,633.669861 822.135864,573.009338%0A C822.135437,571.531555 821.813477,570.053894 821.565674,567.779114%0A C828.529907,509.627594 814.503479,457.763184 779.470825,412.042328%0A C751.471863,375.501129 714.535645,351.395386 670.400085,338.335388%0A C662.567566,332.467743 654.005493,327.355682 647.019897,320.610840%0A C598.711670,273.967438 609.452271,188.353607 674.192566,159.455490%0A C691.179749,151.872894 709.200012,149.072678 727.822754,152.863968%0A C729.071960,153.118286 730.448730,152.746170 731.992310,152.316010%0A C769.401550,160.954422 803.019836,177.923462 834.791809,198.657364%0A C880.962646,228.787796 919.463745,266.834351 950.460815,312.497620%0A C982.820740,360.168488 1003.902954,412.329163 1013.963745,469.046661%0A C1020.018982,503.183136 1020.544678,537.589294 1019.593262,572.806763%0A C1019.448914,575.015015 1019.590332,576.503357 1019.731812,577.991638%0A C1019.772949,580.350159 1019.814148,582.708679 1019.428955,585.628662%0A C1017.683411,593.105652 1016.613953,600.080200 1014.998474,606.925842%0A C1009.980408,628.190918 1005.808533,649.733887 999.348572,670.561157%0A C990.918884,697.739197 978.245422,723.197205 964.169678,747.999512%0A C946.413818,779.286499 923.983276,806.907410 899.392212,832.849548%0A C890.630920,842.092285 880.599915,850.155457 870.943115,858.519897%0A C855.853760,871.589722 839.671936,883.159241 822.263123,892.973389 z"/>%0A%0A %3C!-- Dark orange shadow -->%0A <path fill="%23D85301" d="%0A M822.106567,893.217285%0A C839.671936,883.159241 855.853760,871.589722 870.943115,858.519897%0A C880.599915,850.155457 890.630920,842.092285 899.392212,832.849548%0A C923.983276,806.907410 946.413818,779.286499 964.169678,747.999512%0A C978.245422,723.197205 990.918884,697.739197 999.348572,670.561157%0A C1005.808533,649.733887 1009.980408,628.190918 1014.998474,606.925842%0A C1016.613953,600.080200 1017.683411,593.105652 1019.364136,586.065613%0A C1019.808838,604.428406 1019.960144,622.915649 1019.964478,641.402893%0A C1019.996887,779.531555 1020.306824,917.661377 1019.819763,1055.788208%0A C1019.679565,1095.540405 1004.006104,1128.543701 969.487183,1150.236328%0A C923.479797,1179.148682 863.557739,1162.918457 837.012451,1115.253418%0A C826.966858,1097.215454 822.142151,1077.902100 822.083740,1057.398804%0A C821.929504,1003.248413 821.950806,949.097534 821.846924,894.482788%0A C821.844543,893.832886 821.897339,893.647034 822.106567,893.217285 z"/>%0A%0A <path fill="%23D85301" d="%0A M1019.828918,577.584717%0A C1019.590332,576.503357 1019.448914,575.015015 1019.526367,573.272095%0A C1019.805603,574.404175 1019.865845,575.791016 1019.828918,577.584717 z"/>%0A</svg>%0A){kind=small}
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1254 1254" role="img" aria-label="Qeet logo">%0A <title>Qeet</title>%0A <defs>%0A <mask id="qBowlHole" maskUnits="userSpaceOnUse">%0A <rect width="1254" height="1254" fill="%23FFFFFF"/>%0A <path fill="%23000000" d="%0A M669.964722,338.242981%0A C714.535645,351.395386 751.471863,375.501129 779.470825,412.042328%0A C814.503479,457.763184 828.529907,509.627594 821.508301,567.354248%0A C815.037964,614.333862 796.163635,655.232849 763.035339,688.671509%0A C715.514587,736.637695 657.793396,758.218994 590.453552,749.188904%0A C504.824402,737.706116 436.176788,675.264038 417.429352,590.163330%0A C398.281219,503.243683 423.564056,429.604553 493.036591,373.787628%0A C542.333557,334.180542 599.844727,323.023224 661.836060,336.080780%0A C664.430725,336.627319 666.966248,337.454285 669.964722,338.242981 z"/>%0A </mask>%0A </defs>%0A%0A %3C!-- Bowl + descender curve (white) with hole masked out -->%0A <path mask="url(%23qBowlHole)" fill="%23FCFCFC" d="%0A M821.791687,894.018799%0A C803.326172,903.166809 785.336975,913.478882 766.312927,921.261658%0A C682.977112,955.354797 597.577454,960.575989 510.776794,936.458923%0A C427.137451,913.220154 358.319214,867.022827 303.655487,799.771240%0A C259.619385,745.594543 231.852402,683.929749 219.855377,615.135681%0A C205.246201,531.363037 215.390701,450.569489 250.641022,373.361603%0A C287.752838,292.076569 346.057434,229.640503 423.650269,185.486679%0A C489.535767,147.994873 560.685242,131.387634 636.355042,134.347610%0A C667.607117,135.570114 698.193970,141.258041 728.247498,149.842102%0A C729.508179,150.202209 730.704346,150.788620 731.848389,151.967499%0A C730.448730,152.746170 729.071960,153.118286 727.822754,152.863968%0A C709.200012,149.072678 691.179749,151.872894 674.192566,159.455490%0A C609.452271,188.353607 598.711670,273.967438 647.019897,320.610840%0A C654.005493,327.355682 662.567566,332.467743 669.964722,338.242981%0A C666.966248,337.454285 664.430725,336.627319 661.836060,336.080780%0A C599.844727,323.023224 542.333557,334.180542 493.036591,373.787628%0A C423.564056,429.604553 398.281219,503.243683 417.429352,590.163330%0A C436.176788,675.264038 504.824402,737.706116 590.453552,749.188904%0A C657.793396,758.218994 715.514587,736.637695 763.035339,688.671509%0A C796.163635,655.232849 815.037964,614.333862 821.583984,568.151245%0A C821.813477,570.053894 822.135437,571.531555 822.135864,573.009338%0A C822.152954,633.669861 822.122437,694.330322 822.139038,754.990845%0A C822.151672,800.985046 822.219727,846.979187 822.106567,893.217285%0A C821.897339,893.647034 821.844543,893.832886 821.791687,894.018799 z"/>%0A%0A %3C!-- Bright orange (brand) -->%0A <path fill="%23F26D0E" d="%0A M822.263123,892.973389%0A C822.219727,846.979187 822.151672,800.985046 822.139038,754.990845%0A C822.122437,694.330322 822.152954,633.669861 822.135864,573.009338%0A C822.135437,571.531555 821.813477,570.053894 821.565674,567.779114%0A C828.529907,509.627594 814.503479,457.763184 779.470825,412.042328%0A C751.471863,375.501129 714.535645,351.395386 670.400085,338.335388%0A C662.567566,332.467743 654.005493,327.355682 647.019897,320.610840%0A C598.711670,273.967438 609.452271,188.353607 674.192566,159.455490%0A C691.179749,151.872894 709.200012,149.072678 727.822754,152.863968%0A C729.071960,153.118286 730.448730,152.746170 731.992310,152.316010%0A C769.401550,160.954422 803.019836,177.923462 834.791809,198.657364%0A C880.962646,228.787796 919.463745,266.834351 950.460815,312.497620%0A C982.820740,360.168488 1003.902954,412.329163 1013.963745,469.046661%0A C1020.018982,503.183136 1020.544678,537.589294 1019.593262,572.806763%0A C1019.448914,575.015015 1019.590332,576.503357 1019.731812,577.991638%0A C1019.772949,580.350159 1019.814148,582.708679 1019.428955,585.628662%0A C1017.683411,593.105652 1016.613953,600.080200 1014.998474,606.925842%0A C1009.980408,628.190918 1005.808533,649.733887 999.348572,670.561157%0A C990.918884,697.739197 978.245422,723.197205 964.169678,747.999512%0A C946.413818,779.286499 923.983276,806.907410 899.392212,832.849548%0A C890.630920,842.092285 880.599915,850.155457 870.943115,858.519897%0A C855.853760,871.589722 839.671936,883.159241 822.263123,892.973389 z"/>%0A%0A %3C!-- Dark orange shadow -->%0A <path fill="%23D85301" d="%0A M822.106567,893.217285%0A C839.671936,883.159241 855.853760,871.589722 870.943115,858.519897%0A C880.599915,850.155457 890.630920,842.092285 899.392212,832.849548%0A C923.983276,806.907410 946.413818,779.286499 964.169678,747.999512%0A C978.245422,723.197205 990.918884,697.739197 999.348572,670.561157%0A C1005.808533,649.733887 1009.980408,628.190918 1014.998474,606.925842%0A C1016.613953,600.080200 1017.683411,593.105652 1019.364136,586.065613%0A C1019.808838,604.428406 1019.960144,622.915649 1019.964478,641.402893%0A C1019.996887,779.531555 1020.306824,917.661377 1019.819763,1055.788208%0A C1019.679565,1095.540405 1004.006104,1128.543701 969.487183,1150.236328%0A C923.479797,1179.148682 863.557739,1162.918457 837.012451,1115.253418%0A C826.966858,1097.215454 822.142151,1077.902100 822.083740,1057.398804%0A C821.929504,1003.248413 821.950806,949.097534 821.846924,894.482788%0A C821.844543,893.832886 821.897339,893.647034 822.106567,893.217285 z"/>%0A%0A <path fill="%23D85301" d="%0A M1019.828918,577.584717%0A C1019.590332,576.503357 1019.448914,575.015015 1019.526367,573.272095%0A C1019.805603,574.404175 1019.865845,575.791016 1019.828918,577.584717 z"/>%0A</svg>%0A){kind=small}
QeetrixToast
Beta
Ready to use, but its API may still change before it is marked stable.
Examples
Types
Each type sets the icon and accent. Toasts stack, pause on hover and announce politely.
With action
actionProps adds one button, typically Undo for a reversible action.
Usage
Import
import { Toast } from "@qeetrix/ui";It can also be imported on its own from @qeetrix/ui/components/toast.
States
hover · focus-visible
Support
| Feature | Status |
|---|---|
| Right-to-left | Supported |
| Dark mode | Supported |
| Density | Not supported |
| Server rendering | Client component |
| Reduced motion | Supported |
Accessibility
Follows the WAI-ARIA alert pattern. Not yet audited.
Tests
Covered by unit, accessibility (axe), interaction and visual tests.