{"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":"3884dba6-8663-5674-96bb-ff93c1a2e65f","children":[],"parent":"a659b6c9-787a-5120-a0e1-9343541b5a69","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  <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  <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":"5f0f3717c72f9cd80153c134b0f68228","counter":1507,"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  <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  <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/26e993f/src/pages/components/notification/code.mdx"}}}}