@wix/design-system
Version:
@wix/design-system
57 lines (34 loc) • 1.25 kB
Markdown
## Feature Examples
### 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:
```jsx
```
### 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:
```jsx
```
### 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:
```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
```