{"componentChunkName":"component---src-pages-components-toggle-usage-mdx","path":"/components/toggle/usage/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Toggle","description":"A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/toggle/usage.mdx","titleType":"prepend","MdxNode":{"id":"2fc705e1-6ec1-5001-93ec-f12e05a21824","children":[],"parent":"47d211c4-514d-5fc4-8cf6-c4555c1cf109","internal":{"content":"---\ntitle: Toggle\ndescription: A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## General guidance\n\n_Toggle_ is a control that is used to quickly switch between two possible states. Toggles are only used for these binary actions that occur immediately after the user “flips” the toggle switch. They are commonly used for “on/off” switches.\n\n<Row>\n<Column colLg={8}>\n\n![Example image of on and off toggles.](images/toggle-usage-1.png)\n\n</Column>\n</Row>\n\n#### Heading\n\nA heading may accompany a toggle to further clarify on the action the toggle will perform.\n\n#### Labels\n\nUse labels with a toggle so the action is clear. Labels should be three words or less and appear on the side of a toggle.\n\n#### Language\n\nUse adjectives rather than verbs to describe labels and the state of the object affected.\n\n## Small toggle\n\nSmall toggles are more compact in size, therefore they can be used in use cases such as [data tables](/components/data-table/code).\n\n<Row>\n<Column colLg={8}>\n\n![Example image of small toggles within a data table.](images/toggle-usage-2.png)\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"caf24d13707117026bdf7ebd4160d5f8","counter":1366,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Toggle","description":"A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Toggle\ndescription: A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## General guidance\n\n_Toggle_ is a control that is used to quickly switch between two possible states. Toggles are only used for these binary actions that occur immediately after the user “flips” the toggle switch. They are commonly used for “on/off” switches.\n\n<Row>\n<Column colLg={8}>\n\n![Example image of on and off toggles.](images/toggle-usage-1.png)\n\n</Column>\n</Row>\n\n#### Heading\n\nA heading may accompany a toggle to further clarify on the action the toggle will perform.\n\n#### Labels\n\nUse labels with a toggle so the action is clear. Labels should be three words or less and appear on the side of a toggle.\n\n#### Language\n\nUse adjectives rather than verbs to describe labels and the state of the object affected.\n\n## Small toggle\n\nSmall toggles are more compact in size, therefore they can be used in use cases such as [data tables](/components/data-table/code).\n\n<Row>\n<Column colLg={8}>\n\n![Example image of small toggles within a data table.](images/toggle-usage-2.png)\n\n</Column>\n</Row>\n","fileAbsolutePath":"/fargate/7b444b50/src/pages/components/toggle/usage.mdx"}}}}