## Feature Examples
### Size
- description: Adjust the component size using the `size` prop. The prop supports two sizes:
- `medium` - use where the component needs more emphasis
- `small` (default) - use in dense and compact layouts
- example:
```jsx
;
```
### Skin
- description: Style the component using the `skin` prop. This prop supports two skins:
- `standard` (default) - use in all common cases
- `success` - use to emphasize success states, such as approved
- example:
```jsx
;
```
### State
- description: Control the state of a component with:
- `checked` - use this state to mark an item as complete.
- `disabled` - disables all component interactions. Use it to highlight unavailable functions.
- example:
```jsx
;
```
### 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:
```jsx
;
```
## Common Use Case Examples
### To-do list
- description: Use the check toggle to mark items as completed, e.g., in lists of to-do tasks.
- example:
```jsx
() => {
const renderItem = ({ text, checked: initiallyChecked }) => {
const [checked, setChecked] = React.useState(initiallyChecked);
const options = [
{
value: (
setChecked(!checked)}
/>
),
width: 'auto',
},
{
value: (
{checked ? {text} : text}
),
},
{
value: (
}
>
} />
}
/>
),
width: 'auto',
},
];
return (
);
};
const options = [
renderItem({ text: 'Define a user flow', checked: true }),
renderItem({ text: 'Define the content', checked: false }),
renderItem({ text: 'Prepare the wireframes', checked: false }),
];
return (
{options}
);
};
```