{"componentChunkName":"component---src-pages-components-notification-code-mdx","path":"/components/notification/code/","result":{"pageContext":{"frontmatter":{"title":"Notification","description":"Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/notification/code.mdx","titleType":"prepend","MdxNode":{"id":"10c0c1dc-f3d0-50d5-9e41-29fbe48dedd4","children":[],"parent":"dcddffe4-2049-5eee-8c8a-e876d551923c","internal":{"content":"---\ntitle: Notification\ndescription: Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.\ntabs: [\"Code\", \"Usage\", \"Style\", \"Accessibility\"]\n---\n\n## Toast notification\n\n<ComponentDemo\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/notifications--toast\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-notification--toast\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvtoastnotification--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=notification\",\n  }}\n  knobs={{ ToastNotification: [\"hideCloseButton\", \"kind\", \"lowContrast\"] }}\n>\n  {`\n  <div>\n    <ToastNotification\n      caption=\"Time stamp [00:00:00]\"\n      iconDescription=\"describes the close button\"\n      subtitle={<span>Subtitle text goes here. <a href=\"#example\">Example link</a></span>}\n      timeout={0}\n      title=\"Notification title\"\n    />\n  </div>\n`}\n</ComponentDemo>\n\n## Inline notification\n\n<ComponentDemo\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/notifications--inline\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-notification--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvinlinenotification--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=notification\",\n  }}\n  knobs={{ InlineNotification: [\"hideCloseButton\", \"lowContrast\"] }}\n>\n  {`\n  <div>\n    <InlineNotification\n      kind=\"info\"\n      actions={<NotificationActionButton>Action</NotificationActionButton>}\n      iconDescription=\"describes the close button\"\n      subtitle={<span>Subtitle text goes here. <a href=\"#example\">Example link</a></span>}\n      title=\"Notification title\"\n    />\n  </div>\n  `}\n</ComponentDemo>\n","type":"Mdx","contentDigest":"7f58ac0bd06472bcdf1b5df2df226523","counter":1514,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Notification","description":"Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Notification\ndescription: Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.\ntabs: [\"Code\", \"Usage\", \"Style\", \"Accessibility\"]\n---\n\n## Toast notification\n\n<ComponentDemo\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/notifications--toast\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-notification--toast\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvtoastnotification--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=notification\",\n  }}\n  knobs={{ ToastNotification: [\"hideCloseButton\", \"kind\", \"lowContrast\"] }}\n>\n  {`\n  <div>\n    <ToastNotification\n      caption=\"Time stamp [00:00:00]\"\n      iconDescription=\"describes the close button\"\n      subtitle={<span>Subtitle text goes here. <a href=\"#example\">Example link</a></span>}\n      timeout={0}\n      title=\"Notification title\"\n    />\n  </div>\n`}\n</ComponentDemo>\n\n## Inline notification\n\n<ComponentDemo\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/notifications--inline\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-notification--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvinlinenotification--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=notification\",\n  }}\n  knobs={{ InlineNotification: [\"hideCloseButton\", \"lowContrast\"] }}\n>\n  {`\n  <div>\n    <InlineNotification\n      kind=\"info\"\n      actions={<NotificationActionButton>Action</NotificationActionButton>}\n      iconDescription=\"describes the close button\"\n      subtitle={<span>Subtitle text goes here. <a href=\"#example\">Example link</a></span>}\n      title=\"Notification title\"\n    />\n  </div>\n  `}\n</ComponentDemo>\n","fileAbsolutePath":"/zeit/3b23ef32/src/pages/components/notification/code.mdx"}}}}