## Feature Examples


### Size
- description: Adjust the component size using the `size` prop. The prop supports two sizes:<br/> 
        &emsp;- `medium` - use where the component needs more emphasis<br/>
        &emsp;- `small` (default) - use in dense and compact layouts
- example: 
```jsx 

```

### Skin
- description: Style the component using the `skin` prop. This prop supports two skins:<br/>
        &emsp;- `standard` (default) - use in all common cases<br/>
        &emsp;- `success` - use to emphasize success states, such as <em>approved</em>
- example: 
```jsx 

```

### State
- description: Control the state of a component with:<br/>
        &emsp;- `checked` - use this state to mark an item as complete.<br/>
        &emsp;- `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 

```