https://zendeskgarden-v8.netlify.app/component---src-pages-components-alerts-mdx-935113898dce8216f433.js

1"use strict";(self.webpackChunk_zendeskgarden_website=self.webpackChunk_zendeskgarden_website||[]).push([[6358],{2679:function(e,a,t){t.r(a),t.d(a,{Head:function(){return d},default:function(){return f}});var n=t(11151),l=t(67294),r=t(65900),o=t(87328),s=t(9569),i=t(24230);var c=()=>l.createElement(o.b,{type:"warning"},l.createElement(s.D,null,"Warning"),"Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water",l.createElement(i.x,{"aria-label":"Close Alert"})),m="/**\n * Copyright Zendesk, Inc.\n *\n * Use of this source code is governed under the Apache License, Version 2.0\n * found at http://www.apache.org/licenses/LICENSE-2.0.\n */\n\nimport React from 'react';\nimport { Alert, Title, Close } from '@zendeskgarden/react-notifications';\n\nconst Example = () => (\n  <Alert type=\"warning\">\n    <Title>Warning</Title>\n    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water\n    <Close aria-label=\"Close Alert\" />\n  </Alert>\n);\n\nexport default Example;\n";const p=t(12788).default.div.withConfig({displayName:"AlertType__StyledSpacer",componentId:"sc-yb9wmm-0"})(["height:",";"],(e=>e.theme.space.md));var h=()=>l.createElement(l.Fragment,null,l.createElement(o.b,{type:"info"},l.createElement(s.D,null,"Info"),"Turnip greens yarrow endive cauliflower sea lettuce kohlrabi amaranth water",l.createElement(i.x,{"aria-label":"Close Info Alert"})),l.createElement(p,null),l.createElement(o.b,{type:"warning"},l.createElement(s.D,null,"Warning"),"Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke",l.createElement(i.x,{"aria-label":"Close Warning Alert"})),l.createElement(p,null),l.createElement(o.b,{type:"error"},l.createElement(s.D,null,"Error"),"Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic",l.createElement(i.x,{"aria-label":"Close Error Alert"})),l.createElement(p,null),l.createElement(o.b,{type:"success"},l.createElement(s.D,null,"Success"),"Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke",l.createElement(i.x,{"aria-label":"Close Success Alert"}))),u='/**\n * Copyright Zendesk, Inc.\n *\n * Use of this source code is governed under the Apache License, Version 2.0\n * found at http://www.apache.org/licenses/LICENSE-2.0.\n */\n\nimport React from \'react\';\nimport styled from \'styled-components\';\nimport { Alert, Title, Close } from \'@zendeskgarden/react-notifications\';\n\nconst StyledSpacer = styled.div`\n  height: ${p => p.theme.space.md};\n`;\n\nconst Example = () => (\n  <>\n    <Alert type="info">\n      <Title>Info</Title>\n      Turnip greens yarrow endive cauliflower sea lettuce kohlrabi amaranth water\n      <Close aria-label="Close Info Alert" />\n    </Alert>\n    <StyledSpacer />\n    <Alert type="warning">\n      <Title>Warning</Title>\n      Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke\n      <Close aria-label="Close Warning Alert" />\n    </Alert>\n    <StyledSpacer />\n    <Alert type="error">\n      <Title>Error</Title>\n      Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic\n      <Close aria-label="Close Error Alert" />\n    </Alert>\n    <StyledSpacer />\n    <Alert type="success">\n      <Title>Success</Title>\n      Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke\n      <Close aria-label="Close Success Alert" />\n    </Alert>\n  </>\n);\n\nexport default Example;\n';function d(e){return l.createElement(r.HJ,e)}function g(e){const a=Object.assign({ul:"ul",li:"li",a:"a",h2:"h2",span:"span",h3:"h3",p:"p"},(0,n.a)(),e.components),{Usage:t,Use:r,Misuse:o,CodeExample:s,Configuration:i,Component:p,PropSheet:d}=a;return s||w("CodeExample",!0),p||w("Component",!0),i||w("Configuration",!0),o||w("Misuse",!0),d||w("PropSheet",!0),t||w("Usage",!0),r||w("Use",!0),l.createElement(l.Fragment,null,l.createElement(t,null,l.createElement(r,null,l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"For urgent feedback"),"\n",l.createElement(a.li,null,"For contextual communication inline with page content"),"\n")),l.createElement(o,null,l.createElement(a.ul,null,"\n",l.createElement(a.li,null,"For a passive system update, use a ",l.createElement(a.a,{href:"/components/notifications"},"Notification")," instead"),"\n"))),"\n",l.createElement(a.h2,{id:"how-to-use-it",style:{position:"relative"}}

1,l.createElement(a.a,{href:"#how-to-use-it","aria-label":"how to use it permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n  <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"How to use it"),"\n",l.createElement(a.h3,{id:"default",style:{position:"relative"}},l.createElement(a.a,{href:"#default","aria-label":"default permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n  <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Default"),"\n",l.createElement(a.p,null,"By default, an Alert will be read first by a screen reader and is persistent\nuntil the user dismisses it."),"\n","\n",l.createElement(s,{code:m},l.createElement(c)),"\n",l.createElement(a.h3,{id:"type",style:{position:"relative"}},l.createElement(a.a,{href:"#type","aria-label":"type permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n  <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Type"),"\n",l.createElement(a.p,null,"Types indicate what kind of message is in the alert and help the user understand\nhow to respond. They can be info, warning, error, or success."),"\n","\n",l.createElement(s,{code:u},l.createElement(h)),"\n",l.createElement(a.h2,{id:"configuration",style:{position:"relative"}},l.createElement(a.a,{href:"#configuration","aria-label":"configuration permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n  <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Configuration"),"\n",l.createElement(i,{reactPackage:e.data.mdx.package,components:e.data.mdx.components}),"\n",l.createElement(a.h2,{id:"api",style:{position:"relative"}}

1,l.createElement(a.a,{href:"#api","aria-label":"api permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n  <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"API"),"\n",l.createElement(a.h3,{id:"alert",style:{position:"relative"}},l.createElement(a.a,{href:"#alert","aria-label":"alert permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n  <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Alert"),"\n",l.createElement(p,{components:e.data.mdx.components,componentName:"alert"}),"\n",l.createElement(d,{components:e.data.mdx.components,componentName:"alert"}),"\n",l.createElement(a.h3,{id:"close",style:{position:"relative"}},l.createElement(a.a,{href:"#close","aria-label":"close permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n  <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Close"),"\n",l.createElement(p,{components:e.data.mdx.components,componentName:"close"}),"\n",l.createElement(d,{components:e.data.mdx.components,componentName:"close"}),"\n",l.createElement(a.h3,{id:"paragraph",style:{position:"relative"}},l.createElement(a.a,{href:"#paragraph","aria-label":"paragraph permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n  <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Paragraph"),"\n",l.createElement(p,{components:e.data.mdx.components,componentName:"paragraph"}),"\n",l.createElement(d,{components:e.data.mdx.components,componentName:"paragraph"}),"\n",l.createElement(a.h3,{id:"title",style:{position:"relative"}}

1,l.createElement(a.a,{href:"#title","aria-label":"title permalink",className:"anchor before"},l.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n  <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Title"),"\n",l.createElement(p,{components:e.data.mdx.components,componentName:"title"}),"\n",l.createElement(d,{components:e.data.mdx.components,componentName:"title"}))}var f=function(e={}){const{wrapper:a}=Object.assign({},(0,n.a)(),e.components);return a?l.createElement(a,e,l.createElement(g,e)):g(e)};function w(e,a){throw new Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}}}]);
2//# sourceMappingURL=component---src-pages-components-alerts-mdx-935113898dce8216f433.js.map