{"componentChunkName":"component---src-pages-components-inline-loading-style-mdx","path":"/components/inline-loading/style/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Inline loading","description":"Inline loading spinners notify a user that their action is being processed.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/inline-loading/style.mdx","titleType":"prepend","MdxNode":{"id":"660f7e19-ca5f-54b4-9b47-1e55e6624af0","children":[],"parent":"e30bfe91-8dc6-5614-8507-acb167e55128","internal":{"content":"---\ntitle: Inline loading\ndescription: Inline loading spinners notify a user that their action is being processed.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class                            | Property | Color token       |\n| -------------------------------- | -------- | ----------------- |\n| `.bx--loading__svg`              | stroke   | `$ui-03`          |\n| `.bx--inline-loading__checkmark` | color    | `$interactive-01` |\n| `.bx--inline-loading__text`      | color    | `$text-01`        |\n\n## Typography\n\nButton text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.\n\n| Class                       | Font-size (px/rem) | Font-weight   | Type token       |\n| --------------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--inline-loading__text` | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n\n## Structure\n\n| Class     | Property      | px / rem | Spacing token |\n| --------- | ------------- | -------- | ------------- |\n| Spinner   | width, height | 16 / 1   | –             |\n| Checkmark | width, height | 16 / 1   | –             |\n\n<div className=\"image--fixed\">\n\n![Inline loading spinner structure measurements](images/inline-loading-style-1.png)\n\n</div>\n\n<div className=\"image--fixed\">\n\n![Inline loading states](images/inline-loading-style-2.png)\n\n</div>\n\n<div className=\"image--fixed\">\n\n![Inline loading spinner in context example](images/inline-loading-style-3.png)\n\n</div>\n\n<Caption>\n  Structure measurements for small and large loading spinner | px / rem\n</Caption>\n\n### Placement\n\nThe inline loading component should appear during any user action loading. If button is used to trigger the action, the inline loading component should replace that button.\n\n<div className=\"image--fixed\">\n\n![Inline loading spinner animated_in context example](images/inline-loading-animated.gif)\n\n</div>\n\n<Caption>Example of a inline loading in product context</Caption>\n","type":"Mdx","contentDigest":"a2d357d6908c82dccf4194e1e9e529f9","counter":1308,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Inline loading","description":"Inline loading spinners notify a user that their action is being processed.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Inline loading\ndescription: Inline loading spinners notify a user that their action is being processed.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class                            | Property | Color token       |\n| -------------------------------- | -------- | ----------------- |\n| `.bx--loading__svg`              | stroke   | `$ui-03`          |\n| `.bx--inline-loading__checkmark` | color    | `$interactive-01` |\n| `.bx--inline-loading__text`      | color    | `$text-01`        |\n\n## Typography\n\nButton text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.\n\n| Class                       | Font-size (px/rem) | Font-weight   | Type token       |\n| --------------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--inline-loading__text` | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n\n## Structure\n\n| Class     | Property      | px / rem | Spacing token |\n| --------- | ------------- | -------- | ------------- |\n| Spinner   | width, height | 16 / 1   | –             |\n| Checkmark | width, height | 16 / 1   | –             |\n\n<div className=\"image--fixed\">\n\n![Inline loading spinner structure measurements](images/inline-loading-style-1.png)\n\n</div>\n\n<div className=\"image--fixed\">\n\n![Inline loading states](images/inline-loading-style-2.png)\n\n</div>\n\n<div className=\"image--fixed\">\n\n![Inline loading spinner in context example](images/inline-loading-style-3.png)\n\n</div>\n\n<Caption>\n  Structure measurements for small and large loading spinner | px / rem\n</Caption>\n\n### Placement\n\nThe inline loading component should appear during any user action loading. If button is used to trigger the action, the inline loading component should replace that button.\n\n<div className=\"image--fixed\">\n\n![Inline loading spinner animated_in context example](images/inline-loading-animated.gif)\n\n</div>\n\n<Caption>Example of a inline loading in product context</Caption>\n","fileAbsolutePath":"/fargate/7b444b50/src/pages/components/inline-loading/style.mdx"}}}}