## 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 tag

    Rendered as native

    px} onChange={(e) => setValue(e.target.value)} />
    setOpacity(value)} value={opacity} /> setOpacity(value)} suffix={%} size="small" hideStepper />
    ); }; ```