Spectrum Design Data
  • Components
  • Tokens
  • Registry
  • AI
  • Tools
  • Swatch

    Spectrum docs

    A swatch shows a small sample of a fill — such as a color, gradient, texture, or material — that is intended to be applied to an object.

    Property Type Values Default Required Description
    preview string - - No This will vary depending on implementation.
    size string xs, s, m, l m No -
    shape string square, rectangle square No -
    cornerRounding string none, partial, full none No Determines the corner radius of the swatch. Partial refers to corner-radius-75.
    isSelected boolean - false No -
    isDisabled boolean - false No -
    state string default, hover, down, keyboard focus default No -