[{"data":1,"prerenderedAt":1700},["Reactive",2],{"content-query-Et4R5zDngB":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"body":10,"_type":1696,"_id":1697,"_source":1698,"_file":1699,"_extension":665},"/docs/components/toast","components",false,"","Toast - Inkline","Toasts are small, non-intrusive notifications that appear on the screen to inform users of a specific event or action.",{"type":11,"children":12,"toc":1684},"root",[13,22,28,34,53,60,73,636,642,675,864,870,881,1187,1193,1198,1203,1601,1607,1614,1618,1623,1626,1632,1637,1641,1647,1652,1656,1662,1667,1671,1676,1679],{"type":14,"tag":15,"props":16,"children":18},"element","h1",{"id":17},"toast",[19],{"type":20,"value":21},"text","Toast",{"type":14,"tag":23,"props":24,"children":26},"h2",{"id":25},"toasts-are-small-non-intrusive-notifications-that-appear-on-the-screen-to-inform-users-of-a-specific-event-or-action",[27],{"type":20,"value":9},{"type":14,"tag":29,"props":30,"children":31},"p",{},[32],{"type":20,"value":33},"Toasts are designed to be brief and concise, providing users with relevant information without interrupting their workflow.",{"type":14,"tag":35,"props":36,"children":38},"content-alert",{"color":37},"warning",[39],{"type":14,"tag":29,"props":40,"children":41},{},[42,44,51],{"type":20,"value":43},"To create a toast notification programmatically, please use the ",{"type":14,"tag":45,"props":46,"children":48},"a",{"href":47},"/docs/services/toast",[49],{"type":20,"value":50},"Toast Service",{"type":20,"value":52},". This documentation page exists for component reference purposes only.",{"type":14,"tag":54,"props":55,"children":57},"h3",{"id":56},"color-variants",[58],{"type":20,"value":59},"Color Variants",{"type":14,"tag":29,"props":61,"children":62},{},[63,65,71],{"type":20,"value":64},"Inkline includes several predefined toast colors that you can use within your application. You can apply a style using the ",{"type":14,"tag":66,"props":67,"children":68},"code-inline",{},[69],{"type":20,"value":70},"color",{"type":20,"value":72}," property.",{"type":14,"tag":74,"props":75,"children":76},"content-tabs",{},[77,86],{"type":14,"tag":78,"props":79,"children":80},"template",{"v-slot:preview":7},[81],{"type":14,"tag":82,"props":83,"children":85},"content-preview",{"src":84},"/components/IToast/examples/color-variants",[],{"type":14,"tag":78,"props":87,"children":88},{"v-slot:vue":7},[89],{"type":14,"tag":90,"props":91,"children":96},"code",{"className":92,"code":94,"language":95,"meta":7},[93],"language-vue","\u003Ctemplate>\n    \u003CIToast color=\"light\">\n        \u003Cp>Heads up! This toast needs your attention, but it's not super important.\u003C/p>\n    \u003C/IToast>\n\n    \u003CIToast color=\"dark\">\n        \u003Cp>Heads up! This toast needs your attention, but it's not super important.\u003C/p>\n    \u003C/IToast>\n\n    \u003CIToast color=\"info\">\n        \u003Cp>Heads up! This toast needs your attention, but it's not super important.\u003C/p>\n    \u003C/IToast>\n\n    \u003CIToast color=\"success\">\n        \u003Cp>Well done! You successfully read this important toast message.\u003C/p>\n    \u003C/IToast>\n\n    \u003CIToast color=\"warning\">\n        \u003Cp>Warning! Better check yourself, you're not looking too good.\u003C/p>\n    \u003C/IToast>\n\n    \u003CIToast color=\"danger\">\n        \u003Cp>Oh snap! Change a few things up and try submitting again.\u003C/p>\n    \u003C/IToast>\n\u003C/template>\n\n","vue",[97],{"type":14,"tag":98,"props":99,"children":100},"pre",{},[101],{"type":14,"tag":90,"props":102,"children":103},{"__ignoreMap":7},[104,126,166,192,209,218,251,275,291,299,332,356,372,380,413,438,454,462,495,520,536,544,577,602,618],{"type":14,"tag":105,"props":106,"children":109},"span",{"class":107,"line":108},"line",1,[110,116,121],{"type":14,"tag":105,"props":111,"children":113},{"class":112},"ct-553616",[114],{"type":20,"value":115},"\u003C",{"type":14,"tag":105,"props":117,"children":119},{"class":118},"ct-914029",[120],{"type":20,"value":78},{"type":14,"tag":105,"props":122,"children":123},{"class":112},[124],{"type":20,"value":125},">\n",{"type":14,"tag":105,"props":127,"children":129},{"class":107,"line":128},2,[130,135,141,146,151,156,162],{"type":14,"tag":105,"props":131,"children":132},{"class":112},[133],{"type":20,"value":134},"    \u003C",{"type":14,"tag":105,"props":136,"children":138},{"class":137},"ct-028869",[139],{"type":20,"value":140},"IToast",{"type":14,"tag":105,"props":142,"children":143},{"class":112},[144],{"type":20,"value":145}," ",{"type":14,"tag":105,"props":147,"children":149},{"class":148},"ct-762058",[150],{"type":20,"value":70},{"type":14,"tag":105,"props":152,"children":153},{"class":112},[154],{"type":20,"value":155},"=",{"type":14,"tag":105,"props":157,"children":159},{"class":158},"ct-952708",[160],{"type":20,"value":161},"\"light\"",{"type":14,"tag":105,"props":163,"children":164},{"class":112},[165],{"type":20,"value":125},{"type":14,"tag":105,"props":167,"children":169},{"class":107,"line":168},3,[170,175,179,184,188],{"type":14,"tag":105,"props":171,"children":172},{"class":112},[173],{"type":20,"value":174},"        \u003C",{"type":14,"tag":105,"props":176,"children":177},{"class":118},[178],{"type":20,"value":29},{"type":14,"tag":105,"props":180,"children":181},{"class":112},[182],{"type":20,"value":183},">Heads up! This toast needs your attention, but it's not super important.\u003C/",{"type":14,"tag":105,"props":185,"children":186},{"class":118},[187],{"type":20,"value":29},{"type":14,"tag":105,"props":189,"children":190},{"class":112},[191],{"type":20,"value":125},{"type":14,"tag":105,"props":193,"children":195},{"class":107,"line":194},4,[196,201,205],{"type":14,"tag":105,"props":197,"children":198},{"class":112},[199],{"type":20,"value":200},"    \u003C/",{"type":14,"tag":105,"props":202,"children":203},{"class":137},[204],{"type":20,"value":140},{"type":14,"tag":105,"props":206,"children":207},{"class":112},[208],{"type":20,"value":125},{"type":14,"tag":105,"props":210,"children":212},{"class":107,"line":211},5,[213],{"type":14,"tag":105,"props":214,"children":215},{},[216],{"type":20,"value":217},"\n",{"type":14,"tag":105,"props":219,"children":221},{"class":107,"line":220},6,[222,226,230,234,238,242,247],{"type":14,"tag":105,"props":223,"children":224},{"class":112},[225],{"type":20,"value":134},{"type":14,"tag":105,"props":227,"children":228},{"class":137},[229],{"type":20,"value":140},{"type":14,"tag":105,"props":231,"children":232},{"class":112},[233],{"type":20,"value":145},{"type":14,"tag":105,"props":235,"children":236},{"class":148},[237],{"type":20,"value":70},{"type":14,"tag":105,"props":239,"children":240},{"class":112},[241],{"type":20,"value":155},{"type":14,"tag":105,"props":243,"children":244},{"class":158},[245],{"type":20,"value":246},"\"dark\"",{"type":14,"tag":105,"props":248,"children":249},{"class":112},[250],{"type":20,"value":125},{"type":14,"tag":105,"props":252,"children":254},{"class":107,"line":253},7,[255,259,263,267,271],{"type":14,"tag":105,"props":256,"children":257},{"class":112},[258],{"type":20,"value":174},{"type":14,"tag":105,"props":260,"children":261},{"class":118},[262],{"type":20,"value":29},{"type":14,"tag":105,"props":264,"children":265},{"class":112},[266],{"type":20,"value":183},{"type":14,"tag":105,"props":268,"children":269},{"class":118},[270],{"type":20,"value":29},{"type":14,"tag":105,"props":272,"children":273},{"class":112},[274],{"type":20,"value":125},{"type":14,"tag":105,"props":276,"children":278},{"class":107,"line":277},8,[279,283,287],{"type":14,"tag":105,"props":280,"children":281},{"class":112},[282],{"type":20,"value":200},{"type":14,"tag":105,"props":284,"children":285},{"class":137},[286],{"type":20,"value":140},{"type":14,"tag":105,"props":288,"children":289},{"class":112},[290],{"type":20,"value":125},{"type":14,"tag":105,"props":292,"children":294},{"class":107,"line":293},9,[295],{"type":14,"tag":105,"props":296,"children":297},{},[298],{"type":20,"value":217},{"type":14,"tag":105,"props":300,"children":302},{"class":107,"line":301},10,[303,307,311,315,319,323,328],{"type":14,"tag":105,"props":304,"children":305},{"class":112},[306],{"type":20,"value":134},{"type":14,"tag":105,"props":308,"children":309},{"class":137},[310],{"type":20,"value":140},{"type":14,"tag":105,"props":312,"children":313},{"class":112},[314],{"type":20,"value":145},{"type":14,"tag":105,"props":316,"children":317},{"class":148},[318],{"type":20,"value":70},{"type":14,"tag":105,"props":320,"children":321},{"class":112},[322],{"type":20,"value":155},{"type":14,"tag":105,"props":324,"children":325},{"class":158},[326],{"type":20,"value":327},"\"info\"",{"type":14,"tag":105,"props":329,"children":330},{"class":112},[331],{"type":20,"value":125},{"type":14,"tag":105,"props":333,"children":335},{"class":107,"line":334},11,[336,340,344,348,352],{"type":14,"tag":105,"props":337,"children":338},{"class":112},[339],{"type":20,"value":174},{"type":14,"tag":105,"props":341,"children":342},{"class":118},[343],{"type":20,"value":29},{"type":14,"tag":105,"props":345,"children":346},{"class":112},[347],{"type":20,"value":183},{"type":14,"tag":105,"props":349,"children":350},{"class":118},[351],{"type":20,"value":29},{"type":14,"tag":105,"props":353,"children":354},{"class":112},[355],{"type":20,"value":125},{"type":14,"tag":105,"props":357,"children":359},{"class":107,"line":358},12,[360,364,368],{"type":14,"tag":105,"props":361,"children":362},{"class":112},[363],{"type":20,"value":200},{"type":14,"tag":105,"props":365,"children":366},{"class":137},[367],{"type":20,"value":140},{"type":14,"tag":105,"props":369,"children":370},{"class":112},[371],{"type":20,"value":125},{"type":14,"tag":105,"props":373,"children":375},{"class":107,"line":374},13,[376],{"type":14,"tag":105,"props":377,"children":378},{},[379],{"type":20,"value":217},{"type":14,"tag":105,"props":381,"children":383},{"class":107,"line":382},14,[384,388,392,396,400,404,409],{"type":14,"tag":105,"props":385,"children":386},{"class":112},[387],{"type":20,"value":134},{"type":14,"tag":105,"props":389,"children":390},{"class":137},[391],{"type":20,"value":140},{"type":14,"tag":105,"props":393,"children":394},{"class":112},[395],{"type":20,"value":145},{"type":14,"tag":105,"props":397,"children":398},{"class":148},[399],{"type":20,"value":70},{"type":14,"tag":105,"props":401,"children":402},{"class":112},[403],{"type":20,"value":155},{"type":14,"tag":105,"props":405,"children":406},{"class":158},[407],{"type":20,"value":408},"\"success\"",{"type":14,"tag":105,"props":410,"children":411},{"class":112},[412],{"type":20,"value":125},{"type":14,"tag":105,"props":414,"children":416},{"class":107,"line":415},15,[417,421,425,430,434],{"type":14,"tag":105,"props":418,"children":419},{"class":112},[420],{"type":20,"value":174},{"type":14,"tag":105,"props":422,"children":423},{"class":118},[424],{"type":20,"value":29},{"type":14,"tag":105,"props":426,"children":427},{"class":112},[428],{"type":20,"value":429},">Well done! You successfully read this important toast message.\u003C/",{"type":14,"tag":105,"props":431,"children":432},{"class":118},[433],{"type":20,"value":29},{"type":14,"tag":105,"props":435,"children":436},{"class":112},[437],{"type":20,"value":125},{"type":14,"tag":105,"props":439,"children":441},{"class":107,"line":440},16,[442,446,450],{"type":14,"tag":105,"props":443,"children":444},{"class":112},[445],{"type":20,"value":200},{"type":14,"tag":105,"props":447,"children":448},{"class":137},[449],{"type":20,"value":140},{"type":14,"tag":105,"props":451,"children":452},{"class":112},[453],{"type":20,"value":125},{"type":14,"tag":105,"props":455,"children":457},{"class":107,"line":456},17,[458],{"type":14,"tag":105,"props":459,"children":460},{},[461],{"type":20,"value":217},{"type":14,"tag":105,"props":463,"children":465},{"class":107,"line":464},18,[466,470,474,478,482,486,491],{"type":14,"tag":105,"props":467,"children":468},{"class":112},[469],{"type":20,"value":134},{"type":14,"tag":105,"props":471,"children":472},{"class":137},[473],{"type":20,"value":140},{"type":14,"tag":105,"props":475,"children":476},{"class":112},[477],{"type":20,"value":145},{"type":14,"tag":105,"props":479,"children":480},{"class":148},[481],{"type":20,"value":70},{"type":14,"tag":105,"props":483,"children":484},{"class":112},[485],{"type":20,"value":155},{"type":14,"tag":105,"props":487,"children":488},{"class":158},[489],{"type":20,"value":490},"\"warning\"",{"type":14,"tag":105,"props":492,"children":493},{"class":112},[494],{"type":20,"value":125},{"type":14,"tag":105,"props":496,"children":498},{"class":107,"line":497},19,[499,503,507,512,516],{"type":14,"tag":105,"props":500,"children":501},{"class":112},[502],{"type":20,"value":174},{"type":14,"tag":105,"props":504,"children":505},{"class":118},[506],{"type":20,"value":29},{"type":14,"tag":105,"props":508,"children":509},{"class":112},[510],{"type":20,"value":511},">Warning! Better check yourself, you're not looking too good.\u003C/",{"type":14,"tag":105,"props":513,"children":514},{"class":118},[515],{"type":20,"value":29},{"type":14,"tag":105,"props":517,"children":518},{"class":112},[519],{"type":20,"value":125},{"type":14,"tag":105,"props":521,"children":523},{"class":107,"line":522},20,[524,528,532],{"type":14,"tag":105,"props":525,"children":526},{"class":112},[527],{"type":20,"value":200},{"type":14,"tag":105,"props":529,"children":530},{"class":137},[531],{"type":20,"value":140},{"type":14,"tag":105,"props":533,"children":534},{"class":112},[535],{"type":20,"value":125},{"type":14,"tag":105,"props":537,"children":539},{"class":107,"line":538},21,[540],{"type":14,"tag":105,"props":541,"children":542},{},[543],{"type":20,"value":217},{"type":14,"tag":105,"props":545,"children":547},{"class":107,"line":546},22,[548,552,556,560,564,568,573],{"type":14,"tag":105,"props":549,"children":550},{"class":112},[551],{"type":20,"value":134},{"type":14,"tag":105,"props":553,"children":554},{"class":137},[555],{"type":20,"value":140},{"type":14,"tag":105,"props":557,"children":558},{"class":112},[559],{"type":20,"value":145},{"type":14,"tag":105,"props":561,"children":562},{"class":148},[563],{"type":20,"value":70},{"type":14,"tag":105,"props":565,"children":566},{"class":112},[567],{"type":20,"value":155},{"type":14,"tag":105,"props":569,"children":570},{"class":158},[571],{"type":20,"value":572},"\"danger\"",{"type":14,"tag":105,"props":574,"children":575},{"class":112},[576],{"type":20,"value":125},{"type":14,"tag":105,"props":578,"children":580},{"class":107,"line":579},23,[581,585,589,594,598],{"type":14,"tag":105,"props":582,"children":583},{"class":112},[584],{"type":20,"value":174},{"type":14,"tag":105,"props":586,"children":587},{"class":118},[588],{"type":20,"value":29},{"type":14,"tag":105,"props":590,"children":591},{"class":112},[592],{"type":20,"value":593},">Oh snap! Change a few things up and try submitting again.\u003C/",{"type":14,"tag":105,"props":595,"children":596},{"class":118},[597],{"type":20,"value":29},{"type":14,"tag":105,"props":599,"children":600},{"class":112},[601],{"type":20,"value":125},{"type":14,"tag":105,"props":603,"children":605},{"class":107,"line":604},24,[606,610,614],{"type":14,"tag":105,"props":607,"children":608},{"class":112},[609],{"type":20,"value":200},{"type":14,"tag":105,"props":611,"children":612},{"class":137},[613],{"type":20,"value":140},{"type":14,"tag":105,"props":615,"children":616},{"class":112},[617],{"type":20,"value":125},{"type":14,"tag":105,"props":619,"children":621},{"class":107,"line":620},25,[622,627,631],{"type":14,"tag":105,"props":623,"children":624},{"class":112},[625],{"type":20,"value":626},"\u003C/",{"type":14,"tag":105,"props":628,"children":629},{"class":118},[630],{"type":20,"value":78},{"type":14,"tag":105,"props":632,"children":633},{"class":112},[634],{"type":20,"value":635},">",{"type":14,"tag":54,"props":637,"children":639},{"id":638},"size-variants",[640],{"type":20,"value":641},"Size Variants",{"type":14,"tag":29,"props":643,"children":644},{},[645,647,652,654,659,661,666,668,673],{"type":20,"value":646},"You're able to use the ",{"type":14,"tag":66,"props":648,"children":649},{},[650],{"type":20,"value":651},"size",{"type":20,"value":653}," modifier to control the text and spacing size of your toasts, using one of the available sizes: ",{"type":14,"tag":66,"props":655,"children":656},{},[657],{"type":20,"value":658},"sm",{"type":20,"value":660},", ",{"type":14,"tag":66,"props":662,"children":663},{},[664],{"type":20,"value":665},"md",{"type":20,"value":667},", and ",{"type":14,"tag":66,"props":669,"children":670},{},[671],{"type":20,"value":672},"lg",{"type":20,"value":674},".",{"type":14,"tag":74,"props":676,"children":677},{},[678,685],{"type":14,"tag":78,"props":679,"children":680},{"v-slot:preview":7},[681],{"type":14,"tag":82,"props":682,"children":684},{"src":683},"/components/IToast/examples/size-variants",[],{"type":14,"tag":78,"props":686,"children":687},{"v-slot:vue":7},[688],{"type":14,"tag":90,"props":689,"children":692},{"className":690,"code":691,"language":95,"meta":7},[93],"\u003Ctemplate>\n    \u003CIToast size=\"sm\"> Some quick example text to build on the toast content. \u003C/IToast>\n\n    \u003CIToast size=\"md\"> Some quick example text to build on the toast content. \u003C/IToast>\n\n    \u003CIToast size=\"lg\"> Some quick example text to build on the toast content. \u003C/IToast>\n\u003C/template>\n\n",[693],{"type":14,"tag":98,"props":694,"children":695},{},[696],{"type":14,"tag":90,"props":697,"children":698},{"__ignoreMap":7},[699,714,755,762,802,809,849],{"type":14,"tag":105,"props":700,"children":701},{"class":107,"line":108},[702,706,710],{"type":14,"tag":105,"props":703,"children":704},{"class":112},[705],{"type":20,"value":115},{"type":14,"tag":105,"props":707,"children":708},{"class":118},[709],{"type":20,"value":78},{"type":14,"tag":105,"props":711,"children":712},{"class":112},[713],{"type":20,"value":125},{"type":14,"tag":105,"props":715,"children":716},{"class":107,"line":128},[717,721,725,729,733,737,742,747,751],{"type":14,"tag":105,"props":718,"children":719},{"class":112},[720],{"type":20,"value":134},{"type":14,"tag":105,"props":722,"children":723},{"class":137},[724],{"type":20,"value":140},{"type":14,"tag":105,"props":726,"children":727},{"class":112},[728],{"type":20,"value":145},{"type":14,"tag":105,"props":730,"children":731},{"class":148},[732],{"type":20,"value":651},{"type":14,"tag":105,"props":734,"children":735},{"class":112},[736],{"type":20,"value":155},{"type":14,"tag":105,"props":738,"children":739},{"class":158},[740],{"type":20,"value":741},"\"sm\"",{"type":14,"tag":105,"props":743,"children":744},{"class":112},[745],{"type":20,"value":746},"> Some quick example text to build on the toast content. \u003C/",{"type":14,"tag":105,"props":748,"children":749},{"class":137},[750],{"type":20,"value":140},{"type":14,"tag":105,"props":752,"children":753},{"class":112},[754],{"type":20,"value":125},{"type":14,"tag":105,"props":756,"children":757},{"class":107,"line":168},[758],{"type":14,"tag":105,"props":759,"children":760},{},[761],{"type":20,"value":217},{"type":14,"tag":105,"props":763,"children":764},{"class":107,"line":194},[765,769,773,777,781,785,790,794,798],{"type":14,"tag":105,"props":766,"children":767},{"class":112},[768],{"type":20,"value":134},{"type":14,"tag":105,"props":770,"children":771},{"class":137},[772],{"type":20,"value":140},{"type":14,"tag":105,"props":774,"children":775},{"class":112},[776],{"type":20,"value":145},{"type":14,"tag":105,"props":778,"children":779},{"class":148},[780],{"type":20,"value":651},{"type":14,"tag":105,"props":782,"children":783},{"class":112},[784],{"type":20,"value":155},{"type":14,"tag":105,"props":786,"children":787},{"class":158},[788],{"type":20,"value":789},"\"md\"",{"type":14,"tag":105,"props":791,"children":792},{"class":112},[793],{"type":20,"value":746},{"type":14,"tag":105,"props":795,"children":796},{"class":137},[797],{"type":20,"value":140},{"type":14,"tag":105,"props":799,"children":800},{"class":112},[801],{"type":20,"value":125},{"type":14,"tag":105,"props":803,"children":804},{"class":107,"line":211},[805],{"type":14,"tag":105,"props":806,"children":807},{},[808],{"type":20,"value":217},{"type":14,"tag":105,"props":810,"children":811},{"class":107,"line":220},[812,816,820,824,828,832,837,841,845],{"type":14,"tag":105,"props":813,"children":814},{"class":112},[815],{"type":20,"value":134},{"type":14,"tag":105,"props":817,"children":818},{"class":137},[819],{"type":20,"value":140},{"type":14,"tag":105,"props":821,"children":822},{"class":112},[823],{"type":20,"value":145},{"type":14,"tag":105,"props":825,"children":826},{"class":148},[827],{"type":20,"value":651},{"type":14,"tag":105,"props":829,"children":830},{"class":112},[831],{"type":20,"value":155},{"type":14,"tag":105,"props":833,"children":834},{"class":158},[835],{"type":20,"value":836},"\"lg\"",{"type":14,"tag":105,"props":838,"children":839},{"class":112},[840],{"type":20,"value":746},{"type":14,"tag":105,"props":842,"children":843},{"class":137},[844],{"type":20,"value":140},{"type":14,"tag":105,"props":846,"children":847},{"class":112},[848],{"type":20,"value":125},{"type":14,"tag":105,"props":850,"children":851},{"class":107,"line":253},[852,856,860],{"type":14,"tag":105,"props":853,"children":854},{"class":112},[855],{"type":20,"value":626},{"type":14,"tag":105,"props":857,"children":858},{"class":118},[859],{"type":20,"value":78},{"type":14,"tag":105,"props":861,"children":862},{"class":112},[863],{"type":20,"value":635},{"type":14,"tag":54,"props":865,"children":867},{"id":866},"dismissible",[868],{"type":20,"value":869},"Dismissible",{"type":14,"tag":29,"props":871,"children":872},{},[873,875,879],{"type":20,"value":874},"You can dismiss toast notification using the ",{"type":14,"tag":66,"props":876,"children":877},{},[878],{"type":20,"value":866},{"type":20,"value":880}," property. Dismissible toasts have a dismiss button that can be clicked to manually hide them.",{"type":14,"tag":74,"props":882,"children":883},{},[884,891],{"type":14,"tag":78,"props":885,"children":886},{"v-slot:preview":7},[887],{"type":14,"tag":82,"props":888,"children":890},{"src":889},"/components/IToast/examples/dismissible",[],{"type":14,"tag":78,"props":892,"children":893},{"v-slot:vue":7},[894],{"type":14,"tag":90,"props":895,"children":898},{"className":896,"code":897,"language":95,"meta":7},[93],"\u003Cscript lang=\"ts\" setup>\nimport { ref } from 'vue';\n\nconst visible = ref(true);\n\u003C/script>\n\n\u003Ctemplate>\n    \u003CIToast v-if=\"visible\" v-model=\"visible\" dismissible>\n        \u003Cp>Whoa! This toast can be dismissed.\u003C/p>\n    \u003C/IToast>\n\u003C/template>\n\n",[899],{"type":14,"tag":98,"props":900,"children":901},{},[902],{"type":14,"tag":90,"props":903,"children":904},{"__ignoreMap":7},[905,948,981,988,1038,1053,1060,1075,1133,1157,1172],{"type":14,"tag":105,"props":906,"children":907},{"class":107,"line":108},[908,912,917,921,926,930,935,939,944],{"type":14,"tag":105,"props":909,"children":910},{"class":112},[911],{"type":20,"value":115},{"type":14,"tag":105,"props":913,"children":914},{"class":118},[915],{"type":20,"value":916},"script",{"type":14,"tag":105,"props":918,"children":919},{"class":112},[920],{"type":20,"value":145},{"type":14,"tag":105,"props":922,"children":923},{"class":148},[924],{"type":20,"value":925},"lang",{"type":14,"tag":105,"props":927,"children":928},{"class":112},[929],{"type":20,"value":155},{"type":14,"tag":105,"props":931,"children":932},{"class":158},[933],{"type":20,"value":934},"\"ts\"",{"type":14,"tag":105,"props":936,"children":937},{"class":112},[938],{"type":20,"value":145},{"type":14,"tag":105,"props":940,"children":941},{"class":148},[942],{"type":20,"value":943},"setup",{"type":14,"tag":105,"props":945,"children":946},{"class":112},[947],{"type":20,"value":125},{"type":14,"tag":105,"props":949,"children":950},{"class":107,"line":128},[951,957,962,967,971,976],{"type":14,"tag":105,"props":952,"children":954},{"class":953},"ct-149352",[955],{"type":20,"value":956},"import",{"type":14,"tag":105,"props":958,"children":959},{"class":112},[960],{"type":20,"value":961}," { ref } ",{"type":14,"tag":105,"props":963,"children":964},{"class":953},[965],{"type":20,"value":966},"from",{"type":14,"tag":105,"props":968,"children":969},{"class":112},[970],{"type":20,"value":145},{"type":14,"tag":105,"props":972,"children":973},{"class":158},[974],{"type":20,"value":975},"'vue'",{"type":14,"tag":105,"props":977,"children":978},{"class":112},[979],{"type":20,"value":980},";\n",{"type":14,"tag":105,"props":982,"children":983},{"class":107,"line":168},[984],{"type":14,"tag":105,"props":985,"children":986},{},[987],{"type":20,"value":217},{"type":14,"tag":105,"props":989,"children":990},{"class":107,"line":194},[991,996,1000,1006,1010,1014,1018,1023,1028,1033],{"type":14,"tag":105,"props":992,"children":993},{"class":953},[994],{"type":20,"value":995},"const",{"type":14,"tag":105,"props":997,"children":998},{"class":112},[999],{"type":20,"value":145},{"type":14,"tag":105,"props":1001,"children":1003},{"class":1002},"ct-617022",[1004],{"type":20,"value":1005},"visible",{"type":14,"tag":105,"props":1007,"children":1008},{"class":112},[1009],{"type":20,"value":145},{"type":14,"tag":105,"props":1011,"children":1012},{"class":953},[1013],{"type":20,"value":155},{"type":14,"tag":105,"props":1015,"children":1016},{"class":112},[1017],{"type":20,"value":145},{"type":14,"tag":105,"props":1019,"children":1020},{"class":148},[1021],{"type":20,"value":1022},"ref",{"type":14,"tag":105,"props":1024,"children":1025},{"class":112},[1026],{"type":20,"value":1027},"(",{"type":14,"tag":105,"props":1029,"children":1030},{"class":1002},[1031],{"type":20,"value":1032},"true",{"type":14,"tag":105,"props":1034,"children":1035},{"class":112},[1036],{"type":20,"value":1037},");\n",{"type":14,"tag":105,"props":1039,"children":1040},{"class":107,"line":211},[1041,1045,1049],{"type":14,"tag":105,"props":1042,"children":1043},{"class":112},[1044],{"type":20,"value":626},{"type":14,"tag":105,"props":1046,"children":1047},{"class":118},[1048],{"type":20,"value":916},{"type":14,"tag":105,"props":1050,"children":1051},{"class":112},[1052],{"type":20,"value":125},{"type":14,"tag":105,"props":1054,"children":1055},{"class":107,"line":220},[1056],{"type":14,"tag":105,"props":1057,"children":1058},{},[1059],{"type":20,"value":217},{"type":14,"tag":105,"props":1061,"children":1062},{"class":107,"line":253},[1063,1067,1071],{"type":14,"tag":105,"props":1064,"children":1065},{"class":112},[1066],{"type":20,"value":115},{"type":14,"tag":105,"props":1068,"children":1069},{"class":118},[1070],{"type":20,"value":78},{"type":14,"tag":105,"props":1072,"children":1073},{"class":112},[1074],{"type":20,"value":125},{"type":14,"tag":105,"props":1076,"children":1077},{"class":107,"line":277},[1078,1082,1086,1090,1095,1099,1104,1108,1113,1117,1121,1125,1129],{"type":14,"tag":105,"props":1079,"children":1080},{"class":112},[1081],{"type":20,"value":134},{"type":14,"tag":105,"props":1083,"children":1084},{"class":137},[1085],{"type":20,"value":140},{"type":14,"tag":105,"props":1087,"children":1088},{"class":112},[1089],{"type":20,"value":145},{"type":14,"tag":105,"props":1091,"children":1092},{"class":148},[1093],{"type":20,"value":1094},"v-if",{"type":14,"tag":105,"props":1096,"children":1097},{"class":112},[1098],{"type":20,"value":155},{"type":14,"tag":105,"props":1100,"children":1101},{"class":158},[1102],{"type":20,"value":1103},"\"visible\"",{"type":14,"tag":105,"props":1105,"children":1106},{"class":112},[1107],{"type":20,"value":145},{"type":14,"tag":105,"props":1109,"children":1110},{"class":148},[1111],{"type":20,"value":1112},"v-model",{"type":14,"tag":105,"props":1114,"children":1115},{"class":112},[1116],{"type":20,"value":155},{"type":14,"tag":105,"props":1118,"children":1119},{"class":158},[1120],{"type":20,"value":1103},{"type":14,"tag":105,"props":1122,"children":1123},{"class":112},[1124],{"type":20,"value":145},{"type":14,"tag":105,"props":1126,"children":1127},{"class":148},[1128],{"type":20,"value":866},{"type":14,"tag":105,"props":1130,"children":1131},{"class":112},[1132],{"type":20,"value":125},{"type":14,"tag":105,"props":1134,"children":1135},{"class":107,"line":293},[1136,1140,1144,1149,1153],{"type":14,"tag":105,"props":1137,"children":1138},{"class":112},[1139],{"type":20,"value":174},{"type":14,"tag":105,"props":1141,"children":1142},{"class":118},[1143],{"type":20,"value":29},{"type":14,"tag":105,"props":1145,"children":1146},{"class":112},[1147],{"type":20,"value":1148},">Whoa! This toast can be dismissed.\u003C/",{"type":14,"tag":105,"props":1150,"children":1151},{"class":118},[1152],{"type":20,"value":29},{"type":14,"tag":105,"props":1154,"children":1155},{"class":112},[1156],{"type":20,"value":125},{"type":14,"tag":105,"props":1158,"children":1159},{"class":107,"line":301},[1160,1164,1168],{"type":14,"tag":105,"props":1161,"children":1162},{"class":112},[1163],{"type":20,"value":200},{"type":14,"tag":105,"props":1165,"children":1166},{"class":137},[1167],{"type":20,"value":140},{"type":14,"tag":105,"props":1169,"children":1170},{"class":112},[1171],{"type":20,"value":125},{"type":14,"tag":105,"props":1173,"children":1174},{"class":107,"line":334},[1175,1179,1183],{"type":14,"tag":105,"props":1176,"children":1177},{"class":112},[1178],{"type":20,"value":626},{"type":14,"tag":105,"props":1180,"children":1181},{"class":118},[1182],{"type":20,"value":78},{"type":14,"tag":105,"props":1184,"children":1185},{"class":112},[1186],{"type":20,"value":635},{"type":14,"tag":54,"props":1188,"children":1190},{"id":1189},"rendering",[1191],{"type":20,"value":1192},"Rendering",{"type":14,"tag":29,"props":1194,"children":1195},{},[1196],{"type":20,"value":1197},"Inkline's toast notifications allow you to fully customize the content displayed, including icons, titles, and messages. By utilizing hoisting, you can render your own custom elements, giving you complete control over the look and feel of your toasts.",{"type":14,"tag":29,"props":1199,"children":1200},{},[1201],{"type":20,"value":1202},"This level of customization ensures that your notifications align seamlessly with your application's design and branding, enhancing the overall user experience.",{"type":14,"tag":74,"props":1204,"children":1205},{},[1206,1213],{"type":14,"tag":78,"props":1207,"children":1208},{"v-slot:preview":7},[1209],{"type":14,"tag":82,"props":1210,"children":1212},{"src":1211},"/components/IToast/examples/vnode",[],{"type":14,"tag":78,"props":1214,"children":1215},{"v-slot:vue":7},[1216],{"type":14,"tag":90,"props":1217,"children":1220},{"className":1218,"code":1219,"language":95,"meta":7},[93],"\u003Cscript lang=\"ts\" setup>\nimport { h } from 'vue';\nimport { IIcon } from '@inkline/inkline/components';\n\nconst icon = h(IIcon, { name: 'ink-circle' });\nconst title = h('span', 'Toast title');\nconst message = h('p', 'Toast icon, message, and title rendered using VNode');\n\u003C/script>\n\u003Ctemplate>\n    \u003CIToast :icon=\"icon\" :title=\"title\" :message=\"message\" />\n\u003C/template>\n\n",[1221],{"type":14,"tag":98,"props":1222,"children":1223},{},[1224],{"type":14,"tag":90,"props":1225,"children":1226},{"__ignoreMap":7},[1227,1266,1294,1323,1330,1378,1432,1486,1501,1516,1586],{"type":14,"tag":105,"props":1228,"children":1229},{"class":107,"line":108},[1230,1234,1238,1242,1246,1250,1254,1258,1262],{"type":14,"tag":105,"props":1231,"children":1232},{"class":112},[1233],{"type":20,"value":115},{"type":14,"tag":105,"props":1235,"children":1236},{"class":118},[1237],{"type":20,"value":916},{"type":14,"tag":105,"props":1239,"children":1240},{"class":112},[1241],{"type":20,"value":145},{"type":14,"tag":105,"props":1243,"children":1244},{"class":148},[1245],{"type":20,"value":925},{"type":14,"tag":105,"props":1247,"children":1248},{"class":112},[1249],{"type":20,"value":155},{"type":14,"tag":105,"props":1251,"children":1252},{"class":158},[1253],{"type":20,"value":934},{"type":14,"tag":105,"props":1255,"children":1256},{"class":112},[1257],{"type":20,"value":145},{"type":14,"tag":105,"props":1259,"children":1260},{"class":148},[1261],{"type":20,"value":943},{"type":14,"tag":105,"props":1263,"children":1264},{"class":112},[1265],{"type":20,"value":125},{"type":14,"tag":105,"props":1267,"children":1268},{"class":107,"line":128},[1269,1273,1278,1282,1286,1290],{"type":14,"tag":105,"props":1270,"children":1271},{"class":953},[1272],{"type":20,"value":956},{"type":14,"tag":105,"props":1274,"children":1275},{"class":112},[1276],{"type":20,"value":1277}," { h } ",{"type":14,"tag":105,"props":1279,"children":1280},{"class":953},[1281],{"type":20,"value":966},{"type":14,"tag":105,"props":1283,"children":1284},{"class":112},[1285],{"type":20,"value":145},{"type":14,"tag":105,"props":1287,"children":1288},{"class":158},[1289],{"type":20,"value":975},{"type":14,"tag":105,"props":1291,"children":1292},{"class":112},[1293],{"type":20,"value":980},{"type":14,"tag":105,"props":1295,"children":1296},{"class":107,"line":168},[1297,1301,1306,1310,1314,1319],{"type":14,"tag":105,"props":1298,"children":1299},{"class":953},[1300],{"type":20,"value":956},{"type":14,"tag":105,"props":1302,"children":1303},{"class":112},[1304],{"type":20,"value":1305}," { IIcon } ",{"type":14,"tag":105,"props":1307,"children":1308},{"class":953},[1309],{"type":20,"value":966},{"type":14,"tag":105,"props":1311,"children":1312},{"class":112},[1313],{"type":20,"value":145},{"type":14,"tag":105,"props":1315,"children":1316},{"class":158},[1317],{"type":20,"value":1318},"'@inkline/inkline/components'",{"type":14,"tag":105,"props":1320,"children":1321},{"class":112},[1322],{"type":20,"value":980},{"type":14,"tag":105,"props":1324,"children":1325},{"class":107,"line":194},[1326],{"type":14,"tag":105,"props":1327,"children":1328},{},[1329],{"type":20,"value":217},{"type":14,"tag":105,"props":1331,"children":1332},{"class":107,"line":211},[1333,1337,1341,1346,1350,1354,1358,1363,1368,1373],{"type":14,"tag":105,"props":1334,"children":1335},{"class":953},[1336],{"type":20,"value":995},{"type":14,"tag":105,"props":1338,"children":1339},{"class":112},[1340],{"type":20,"value":145},{"type":14,"tag":105,"props":1342,"children":1343},{"class":1002},[1344],{"type":20,"value":1345},"icon",{"type":14,"tag":105,"props":1347,"children":1348},{"class":112},[1349],{"type":20,"value":145},{"type":14,"tag":105,"props":1351,"children":1352},{"class":953},[1353],{"type":20,"value":155},{"type":14,"tag":105,"props":1355,"children":1356},{"class":112},[1357],{"type":20,"value":145},{"type":14,"tag":105,"props":1359,"children":1360},{"class":148},[1361],{"type":20,"value":1362},"h",{"type":14,"tag":105,"props":1364,"children":1365},{"class":112},[1366],{"type":20,"value":1367},"(IIcon, { name: ",{"type":14,"tag":105,"props":1369,"children":1370},{"class":158},[1371],{"type":20,"value":1372},"'ink-circle'",{"type":14,"tag":105,"props":1374,"children":1375},{"class":112},[1376],{"type":20,"value":1377}," });\n",{"type":14,"tag":105,"props":1379,"children":1380},{"class":107,"line":220},[1381,1385,1389,1394,1398,1402,1406,1410,1414,1419,1423,1428],{"type":14,"tag":105,"props":1382,"children":1383},{"class":953},[1384],{"type":20,"value":995},{"type":14,"tag":105,"props":1386,"children":1387},{"class":112},[1388],{"type":20,"value":145},{"type":14,"tag":105,"props":1390,"children":1391},{"class":1002},[1392],{"type":20,"value":1393},"title",{"type":14,"tag":105,"props":1395,"children":1396},{"class":112},[1397],{"type":20,"value":145},{"type":14,"tag":105,"props":1399,"children":1400},{"class":953},[1401],{"type":20,"value":155},{"type":14,"tag":105,"props":1403,"children":1404},{"class":112},[1405],{"type":20,"value":145},{"type":14,"tag":105,"props":1407,"children":1408},{"class":148},[1409],{"type":20,"value":1362},{"type":14,"tag":105,"props":1411,"children":1412},{"class":112},[1413],{"type":20,"value":1027},{"type":14,"tag":105,"props":1415,"children":1416},{"class":158},[1417],{"type":20,"value":1418},"'span'",{"type":14,"tag":105,"props":1420,"children":1421},{"class":112},[1422],{"type":20,"value":660},{"type":14,"tag":105,"props":1424,"children":1425},{"class":158},[1426],{"type":20,"value":1427},"'Toast title'",{"type":14,"tag":105,"props":1429,"children":1430},{"class":112},[1431],{"type":20,"value":1037},{"type":14,"tag":105,"props":1433,"children":1434},{"class":107,"line":253},[1435,1439,1443,1448,1452,1456,1460,1464,1468,1473,1477,1482],{"type":14,"tag":105,"props":1436,"children":1437},{"class":953},[1438],{"type":20,"value":995},{"type":14,"tag":105,"props":1440,"children":1441},{"class":112},[1442],{"type":20,"value":145},{"type":14,"tag":105,"props":1444,"children":1445},{"class":1002},[1446],{"type":20,"value":1447},"message",{"type":14,"tag":105,"props":1449,"children":1450},{"class":112},[1451],{"type":20,"value":145},{"type":14,"tag":105,"props":1453,"children":1454},{"class":953},[1455],{"type":20,"value":155},{"type":14,"tag":105,"props":1457,"children":1458},{"class":112},[1459],{"type":20,"value":145},{"type":14,"tag":105,"props":1461,"children":1462},{"class":148},[1463],{"type":20,"value":1362},{"type":14,"tag":105,"props":1465,"children":1466},{"class":112},[1467],{"type":20,"value":1027},{"type":14,"tag":105,"props":1469,"children":1470},{"class":158},[1471],{"type":20,"value":1472},"'p'",{"type":14,"tag":105,"props":1474,"children":1475},{"class":112},[1476],{"type":20,"value":660},{"type":14,"tag":105,"props":1478,"children":1479},{"class":158},[1480],{"type":20,"value":1481},"'Toast icon, message, and title rendered using VNode'",{"type":14,"tag":105,"props":1483,"children":1484},{"class":112},[1485],{"type":20,"value":1037},{"type":14,"tag":105,"props":1487,"children":1488},{"class":107,"line":277},[1489,1493,1497],{"type":14,"tag":105,"props":1490,"children":1491},{"class":112},[1492],{"type":20,"value":626},{"type":14,"tag":105,"props":1494,"children":1495},{"class":118},[1496],{"type":20,"value":916},{"type":14,"tag":105,"props":1498,"children":1499},{"class":112},[1500],{"type":20,"value":125},{"type":14,"tag":105,"props":1502,"children":1503},{"class":107,"line":293},[1504,1508,1512],{"type":14,"tag":105,"props":1505,"children":1506},{"class":112},[1507],{"type":20,"value":115},{"type":14,"tag":105,"props":1509,"children":1510},{"class":118},[1511],{"type":20,"value":78},{"type":14,"tag":105,"props":1513,"children":1514},{"class":112},[1515],{"type":20,"value":125},{"type":14,"tag":105,"props":1517,"children":1518},{"class":107,"line":301},[1519,1523,1527,1531,1536,1540,1545,1549,1554,1558,1563,1567,1572,1576,1581],{"type":14,"tag":105,"props":1520,"children":1521},{"class":112},[1522],{"type":20,"value":134},{"type":14,"tag":105,"props":1524,"children":1525},{"class":137},[1526],{"type":20,"value":140},{"type":14,"tag":105,"props":1528,"children":1529},{"class":112},[1530],{"type":20,"value":145},{"type":14,"tag":105,"props":1532,"children":1533},{"class":148},[1534],{"type":20,"value":1535},":icon",{"type":14,"tag":105,"props":1537,"children":1538},{"class":112},[1539],{"type":20,"value":155},{"type":14,"tag":105,"props":1541,"children":1542},{"class":158},[1543],{"type":20,"value":1544},"\"icon\"",{"type":14,"tag":105,"props":1546,"children":1547},{"class":112},[1548],{"type":20,"value":145},{"type":14,"tag":105,"props":1550,"children":1551},{"class":148},[1552],{"type":20,"value":1553},":title",{"type":14,"tag":105,"props":1555,"children":1556},{"class":112},[1557],{"type":20,"value":155},{"type":14,"tag":105,"props":1559,"children":1560},{"class":158},[1561],{"type":20,"value":1562},"\"title\"",{"type":14,"tag":105,"props":1564,"children":1565},{"class":112},[1566],{"type":20,"value":145},{"type":14,"tag":105,"props":1568,"children":1569},{"class":148},[1570],{"type":20,"value":1571},":message",{"type":14,"tag":105,"props":1573,"children":1574},{"class":112},[1575],{"type":20,"value":155},{"type":14,"tag":105,"props":1577,"children":1578},{"class":158},[1579],{"type":20,"value":1580},"\"message\"",{"type":14,"tag":105,"props":1582,"children":1583},{"class":112},[1584],{"type":20,"value":1585}," />\n",{"type":14,"tag":105,"props":1587,"children":1588},{"class":107,"line":334},[1589,1593,1597],{"type":14,"tag":105,"props":1590,"children":1591},{"class":112},[1592],{"type":20,"value":626},{"type":14,"tag":105,"props":1594,"children":1595},{"class":118},[1596],{"type":20,"value":78},{"type":14,"tag":105,"props":1598,"children":1599},{"class":112},[1600],{"type":20,"value":635},{"type":14,"tag":54,"props":1602,"children":1604},{"id":1603},"props",[1605],{"type":20,"value":1606},"Props",{"type":14,"tag":1608,"props":1609,"children":1611},"h4",{"id":1610},"itoastcontainer",[1612],{"type":20,"value":1613},"IToastContainer",{"type":14,"tag":1615,"props":1616,"children":1617},"content-component-props",{"component":1613},[],{"type":14,"tag":1608,"props":1619,"children":1621},{"id":1620},"itoast",[1622],{"type":20,"value":140},{"type":14,"tag":1615,"props":1624,"children":1625},{"component":140},[],{"type":14,"tag":54,"props":1627,"children":1629},{"id":1628},"slots",[1630],{"type":20,"value":1631},"Slots",{"type":14,"tag":1608,"props":1633,"children":1635},{"id":1634},"itoast-1",[1636],{"type":20,"value":140},{"type":14,"tag":1638,"props":1639,"children":1640},"content-component-slots",{"component":140},[],{"type":14,"tag":54,"props":1642,"children":1644},{"id":1643},"events",[1645],{"type":20,"value":1646},"Events",{"type":14,"tag":1608,"props":1648,"children":1650},{"id":1649},"itoast-2",[1651],{"type":20,"value":140},{"type":14,"tag":1653,"props":1654,"children":1655},"content-component-events",{"component":140},[],{"type":14,"tag":54,"props":1657,"children":1659},{"id":1658},"design-tokens",[1660],{"type":20,"value":1661},"Design Tokens",{"type":14,"tag":1608,"props":1663,"children":1665},{"id":1664},"itoastcontainer-1",[1666],{"type":20,"value":1613},{"type":14,"tag":1668,"props":1669,"children":1670},"content-component-design-tokens",{"component":1613},[],{"type":14,"tag":1608,"props":1672,"children":1674},{"id":1673},"itoast-3",[1675],{"type":20,"value":140},{"type":14,"tag":1668,"props":1677,"children":1678},{"component":140},[],{"type":14,"tag":1680,"children":1681},"style",[1682],{"type":20,"value":1683},".ct-553616{color:#24292E;}\n.dark-theme .ct-553616{color:#E1E4E8;}\n.ct-914029{color:#22863A;}\n.dark-theme .ct-914029{color:#85E89D;}\n.ct-028869{color:#B31D28;font-style:italic;}\n.dark-theme .ct-028869{color:#FDAEB7;font-style:italic;}\n.ct-762058{color:#6F42C1;}\n.dark-theme .ct-762058{color:#B392F0;}\n.ct-952708{color:#032F62;}\n.dark-theme .ct-952708{color:#9ECBFF;}\n.ct-149352{color:#D73A49;}\n.dark-theme .ct-149352{color:#F97583;}\n.ct-617022{color:#005CC5;}\n.dark-theme .ct-617022{color:#79B8FF;}",{"title":7,"searchDepth":128,"depth":128,"links":1685},[1686],{"id":25,"depth":128,"text":9,"children":1687},[1688,1689,1690,1691,1692,1693,1694,1695],{"id":56,"depth":168,"text":59},{"id":638,"depth":168,"text":641},{"id":866,"depth":168,"text":869},{"id":1189,"depth":168,"text":1192},{"id":1603,"depth":168,"text":1606},{"id":1628,"depth":168,"text":1631},{"id":1643,"depth":168,"text":1646},{"id":1658,"depth":168,"text":1661},"markdown","content:docs:components:toast.md","content","docs/components/toast.md",1794582259717]