wix-style-react
Version:
46 lines (45 loc) • 1.84 kB
JavaScript
export default {
description:
'Check toggle allows users to make a binary choice between two states. It`s commonly used to mark a specific item as completed or not.',
do: ['Use it to mark item as completed or not'],
dont: [
'Don’t use it to turn the setting on or off. Use <ToggleSwitch/> instead.',
'Don’t use it to select a single or multiple items. Use <Checkbox/> or <Radio/> instead.',
],
featureExamples: [
{
title: 'Size',
description: `Adjust the component size using the \`size\` prop. The prop supports two sizes:<br/>
 - \`medium\` - use where the component needs more emphasis<br/>
 - \`small\` (default) - use in dense and compact layouts`,
example: '_size',
},
{
title: 'Skin',
description: `Style the component using the \`skin\` prop. This prop supports two skins:<br/>
 - \`standard\` (default) - use in all common cases<br/>
 - \`success\` - use to emphasize success states, such as <em>approved</em>`,
example: '_skin',
},
{
title: 'State',
description: `Control the state of a component with:<br/>
 - \`checked\` - use this state to mark an item as complete.<br/>
 - \`disabled\` - disables all component interactions. Use it to highlight unavailable functions.`,
example: '_state',
},
{
title: 'Tooltip',
description: `Explain an action that's about to be performed with a descriptive message in a tooltip.
Use the \`tooltipContent\` prop to pass the text to a tooltip.`,
example: '_tooltip',
},
],
commonUseCaseExamples: [
{
title: 'To-do list',
description: `Use the check toggle to mark items as completed, e.g., in lists of to-do tasks.`,
example: '_todoList',
},
],
};