<reponame>HarshJainZeusInn/design-system<gh_stars>0
{
    "componentChunkName": "component---src-pages-components-status-hint-usage-mdx",
    "path": "/components/statusHint/usage/",
    "result": {"pageContext":{"frontmatter":{"title":"Status hint","description":"Status hint is used to highlight the status of an item.","tabs":["Usage","Code"],"showMobile":true},"relativePagePath":"/components/statusHint/usage.mdx","titleType":"page","MdxNode":{"id":"ee099205-1540-5d7f-a025-0889a2fab466","children":[],"parent":"fb2bd756-d39b-5fa4-8d1b-dfbadd469b34","internal":{"content":"---\ntitle: Status hint\ndescription: Status hint is used to highlight the status of an item.\ntabs: ['Usage', 'Code']\nshowMobile: true\n---\n\nAs the name suggests, Status Hints can be used to highlight the status of a resource in tables, lists, headers, etc.\n\n### Appearance\n\nStatus hint comes in 5 Appearances -\n\n#### Info\n\n<Preview name='statushint-info'/>\n\n#### Warning \n\n<Preview name='statushint-ongoing'/>\n\n#### Success\n\n<Preview name='statushint-success'/>\n\n#### Alert\n\n<Preview name='statushint-alert'/>\n\n#### Default\n\n<Preview name='statushint-default-status-hint'/>\n\n### Properties\n\n<br/>\n\n<Card shadow='none'>\n  <Table\n    showMenu={false}\n    separator={true}\n    data={[\n      {\n        Property: 'Label',\n        Value: '<Label>',\n        Configurable: '❌',\n      },\n      {\n        Property: 'Color of status dot',\n        Value: 'Color based on - Info, Warning, Success, Alert, Default',\n        Configurable: '❌',\n      },\n    ]}\n    schema={[\n      {\n        name: 'Property',\n        displayName: 'Property',\n        width: '33%',\n        sorting: false,\n        separator: true,\n      },\n      {\n        name: 'Value',\n        displayName: 'Value',\n        width: '33%',\n        sorting: false,\n        separator: true\n        \n      },\n      {\n        name: 'Configurable',\n        displayName: 'Configurable?',\n        width: '33%',\n        sorting: false,\n        separator: true\n      },\n    ]}\n    withHeader={false}\n  />\n</Card>\n<br/>\n<br/>\n\n### Usage \n\n<br/>\n\n#### Status hint vs Badge\n\nIn page headers, badge is used as label while status hint is used to indicate the status of the particular entity. \n\n![Status hint vs Badge in page headers](./images/statushint-1.png)\n\n<br/>\n<br/>","type":"Mdx","contentDigest":"a4e81ce730483ecb61601aa72b8529a2","owner":"gatsby-plugin-mdx","counter":1663},"frontmatter":{"title":"Status hint","description":"Status hint is used to highlight the status of an item.","tabs":["Usage","Code"],"showMobile":true},"exports":{},"rawBody":"---\ntitle: Status hint\ndescription: Status hint is used to highlight the status of an item.\ntabs: ['Usage', 'Code']\nshowMobile: true\n---\n\nAs the name suggests, Status Hints can be used to highlight the status of a resource in tables, lists, headers, etc.\n\n### Appearance\n\nStatus hint comes in 5 Appearances -\n\n#### Info\n\n<Preview name='statushint-info'/>\n\n#### Warning \n\n<Preview name='statushint-ongoing'/>\n\n#### Success\n\n<Preview name='statushint-success'/>\n\n#### Alert\n\n<Preview name='statushint-alert'/>\n\n#### Default\n\n<Preview name='statushint-default-status-hint'/>\n\n### Properties\n\n<br/>\n\n<Card shadow='none'>\n  <Table\n    showMenu={false}\n    separator={true}\n    data={[\n      {\n        Property: 'Label',\n        Value: '<Label>',\n        Configurable: '❌',\n      },\n      {\n        Property: 'Color of status dot',\n        Value: 'Color based on - Info, Warning, Success, Alert, Default',\n        Configurable: '❌',\n      },\n    ]}\n    schema={[\n      {\n        name: 'Property',\n        displayName: 'Property',\n        width: '33%',\n        sorting: false,\n        separator: true,\n      },\n      {\n        name: 'Value',\n        displayName: 'Value',\n        width: '33%',\n        sorting: false,\n        separator: true\n        \n      },\n      {\n        name: 'Configurable',\n        displayName: 'Configurable?',\n        width: '33%',\n        sorting: false,\n        separator: true\n      },\n    ]}\n    withHeader={false}\n  />\n</Card>\n<br/>\n<br/>\n\n### Usage \n\n<br/>\n\n#### Status hint vs Badge\n\nIn page headers, badge is used as label while status hint is used to indicate the status of the particular entity. \n\n![Status hint vs Badge in page headers](./images/statushint-1.png)\n\n<br/>\n<br/>","fileAbsolutePath":"/Users/harshjain/Documents/innovaccer/projects/design system/design-system/docs/src/pages/components/statusHint/usage.mdx","__gatsby_resolved":{"frontmatter":{"title":"Status hint"}}}}},
    "staticQueryHashes": ["1514734083","227138135","2319071508","2754858070","3057627995","3390246842","345969789","3719803338"]}