## Feature Examples
### Fill
- description: Render preview content with `fill` prop. It accepts: - colors - gradients - colors with opacity - images - SVGs
- example:
```jsx
} />
;
```
### Multiple colors
- description: Display up to four selected colors in the fill preview. Use the `fill` prop to pass definitions for up to four colors, including those with opacity. This feature is useful for visualizing selections that involve semi-transparent colors. **Note**: Each color segment is not individually interactive, the entire element is a single clickable area to ensure a sufficient hit target.
- example:
```jsx
;
```
### Size
- description: Control the component size with the size prop. The component supports **five sizes**: - `extraTiny`, use in very dense layouts for display purposes only. Keep in mind that this size does not provide a sufficient clickable area, so use it sparingly. - `tiny`, use in tight layouts where space is limited. - `small`, use to display rows of color selections. This size is also used in other components, such as ``. - `medium`, use in design settings panels. - `large`, use in spacious layouts, especially when only a few `` components are present.
- example:
```jsx
;
```
### Preview ratio
- description: Control preview ratio with the `aspectRatio` prop. By default, the component maintains a 1:1 ratio when the width of parent container is defined.
- example:
```jsx
;
```
### States
- description: Control the component state with: - `selected` - use to highlight active selection. - `disabled` - use to highlight unavailable option.
- example:
```jsx
No value
Filled
Selected
Disabled
;
```
### Render as
- description: Render the preview as another component or DOM tag.
- example:
```jsx
Rendered as <a/> tag
Rendered as native <button/> tag
;
```
### Image fit
- description: When `fill` is an image, `imageFit` controls how it is sized inside the preview: - `cover` fills the preview and crops the overflow, keeping the image proportions. - `contain` fits the whole image inside the preview, keeping its proportions. With `imageFit` unset the image is stretched to the preview shape, which distorts it whenever the two ratios differ. The example below puts a wide image in a square preview, so each value is easy to tell apart.
- example:
```jsx
unset (stretched)
cover
contain
;
```
## Common Use Case Examples
### Fill type
- description: Use fill preview to show the options of gradient fill types in forms.
- example:
```jsx
() => {
const [inputValue, setInputValue] = React.useState('#ffffff');
const [selected, setSelected] = React.useState(0);
const [fillType, setFillType] = React.useState('gradient');
const solidColors = ['#ffbc42', '#d81159', '#8f2d56', '#218380', '#73d2de'];
const gradientColors = [
'linear-gradient(45deg, rgba(14,0,255,1) 0%, rgba(0,212,255,1) 80%)',
'linear-gradient(45deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)',
'linear-gradient(to right top, #dbfd2d, #dd7c00)',
'linear-gradient(to right, #00dd83, #22a0c3)',
'linear-gradient(to right, #aa99ff, #aa11ff)',
];
const renderFillPreview = ({ content, color, index }) => (
setSelected(index)}
fill={color}
/>
);
return (
setFillType(value)}
>
Solid
Gradient
{fillType === 'solid'
? solidColors.map((color, index) =>
renderFillPreview({
content: 'Solid color',
color,
index,
}),
)
: gradientColors.map((color, index) =>
renderFillPreview({
content: 'Gradient color',
color,
index,
}),
)}
);
};
```
### Color selection
- description: Use `` to let users select a color for different items.
- example:
```jsx
() => {
const [value, setValue] = React.useState(50);
const [opacity, setOpacity] = React.useState(100);
return (
{}}
onHelpButtonClick={() => {}}
>
{}}>
DisplayLayoutDesignText
}
>
Back
);
};
```