Skip to main content
.previewName(name: string): Component
​
name
string
required
The display name shown in the preview selector.

​
Support

​
Usage

​
Named previews

Use .previewName() on preview variants to label them in the preview selector. 
const previews = [
    Self({ variant: "primary" }).previewName("Primary"),
    Self({ variant: "destructive" }).previewName("Destructive"),
    Self({ variant: "disabled" }).previewName("Disabled"),
]

​
Notes

  • When .previewName() is not set, previews default to “Preview 1”, “Preview 2”, etc. (1-based index).
  • Preview names appear in the Composer’s preview picker dropdown.