{"componentChunkName":"component---src-pages-components-inline-notification-mdx","path":"/components/InlineNotification/","result":{"pageContext":{"frontmatter":{"title":"Inline notification","description":"Usage instructions for the Inline notification component"},"relativePagePath":"/components/InlineNotification.mdx","titleType":"page","MdxNode":{"id":"bd4be37c-00a6-563f-bd02-b824d175fbf6","children":[],"parent":"cdb6b4b7-c285-55fa-8c73-3e0530eb834d","internal":{"content":"---\ntitle: Inline notification\ndescription: Usage instructions for the Inline notification component\n---\n\n<PageDescription>\n\nThe `<InlineNotification>` component is used to communicate important information to a user.\n\n</PageDescription>\n\n## Example\n\n<Title>Info</Title>\n\n<InlineNotification>\n\n**Lorem ipsum:** dolor sit amet, [consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.\n\n</InlineNotification>\n\n<Title>Error</Title>\n\n<InlineNotification kind=\"error\">\n\n**Error:** dolor sit amet, [consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.\n\n</InlineNotification>\n\n<Title>Success</Title>\n\n<InlineNotification kind=\"success\">\n\n**Success:** dolor sit amet, [consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.\n\n</InlineNotification>\n\n<Title>Warning</Title>\n\n<InlineNotification kind=\"warning\">\n\n**Warning:** dolor sit amet, [consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.\n\n</InlineNotification>\n\n## Code\n\n```jsx path=components/InlineNotification/InlineNotification.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/InlineNotification\n// Info\n<InlineNotification>\n\n**Lorem ipsum:** dolor sit amet, [consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.\n\n</InlineNotification>\n\n// Error\n<InlineNotification kind=\"error\">\n\n**Error:** dolor sit amet, [consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.\n\n</InlineNotification>\n\n// Success\n<InlineNotification kind=\"success\">\n\n**Success:** dolor sit amet, [consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.\n\n</InlineNotification>\n\n// Warning\n<InlineNotification kind=\"warning\">\n\n**Warning:** dolor sit amet, [consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.\n\n</InlineNotification>\n```\n\n### Props\n\n| property  | propType | required | default | description                                                        |\n| --------- | -------- | -------- | ------- | ------------------------------------------------------------------ |\n| children  | node     |          |         | Pass in the children that will be rendered within the notification |\n| className | string   |          |         | Specify an optional className to be applied to the container node  |\n| kind      | string   | yes      | `info`  | `error`, `info`, `success`, `warning`                              |\n","type":"Mdx","contentDigest":"d1ae45777fa4496166853d03b95d6c06","counter":154,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Inline notification","description":"Usage instructions for the Inline notification component"},"exports":{},"rawBody":"---\ntitle: Inline notification\ndescription: Usage instructions for the Inline notification component\n---\n\n<PageDescription>\n\nThe `<InlineNotification>` component is used to communicate important information to a user.\n\n</PageDescription>\n\n## Example\n\n<Title>Info</Title>\n\n<InlineNotification>\n\n**Lorem ipsum:** dolor sit amet, [consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.\n\n</InlineNotification>\n\n<Title>Error</Title>\n\n<InlineNotification kind=\"error\">\n\n**Error:** dolor sit amet, [consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.\n\n</InlineNotification>\n\n<Title>Success</Title>\n\n<InlineNotification kind=\"success\">\n\n**Success:** dolor sit amet, [consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.\n\n</InlineNotification>\n\n<Title>Warning</Title>\n\n<InlineNotification kind=\"warning\">\n\n**Warning:** dolor sit amet, [consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.\n\n</InlineNotification>\n\n## Code\n\n```jsx path=components/InlineNotification/InlineNotification.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/InlineNotification\n// Info\n<InlineNotification>\n\n**Lorem ipsum:** dolor sit amet, [consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.\n\n</InlineNotification>\n\n// Error\n<InlineNotification kind=\"error\">\n\n**Error:** dolor sit amet, [consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.\n\n</InlineNotification>\n\n// Success\n<InlineNotification kind=\"success\">\n\n**Success:** dolor sit amet, [consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.\n\n</InlineNotification>\n\n// Warning\n<InlineNotification kind=\"warning\">\n\n**Warning:** dolor sit amet, [consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.\n\n</InlineNotification>\n```\n\n### Props\n\n| property  | propType | required | default | description                                                        |\n| --------- | -------- | -------- | ------- | ------------------------------------------------------------------ |\n| children  | node     |          |         | Pass in the children that will be rendered within the notification |\n| className | string   |          |         | Specify an optional className to be applied to the container node  |\n| kind      | string   | yes      | `info`  | `error`, `info`, `success`, `warning`                              |\n","fileAbsolutePath":"/opt/build/repo/src/pages/components/InlineNotification.mdx"}}}}