Skip to main content
.previewName(name: string): Component;

​
Parameters

​
name
string
required
The display name for this preview variant.

​
Support

​
Usage

​
Basic preview naming

const previews = [
    Button("Default", () => {}),
    Button("Primary", () => {})
        .previewName("Primary Button"),
    Button("Disabled", () => {})
        .previewName("Disabled State")
];

export default defineComponent({ body, previews });

​
Named component states

const previews = [
    Card({ title: "Hello World" })
        .previewName("Default Card"),
    Card({ title: "Featured", featured: true })
        .previewName("Featured Card"),
    Card({ title: "Compact", size: "compact" })
        .previewName("Compact Size")
];

export default defineComponent({ body, previews });

​
Examples

​
Multiple variants with descriptive names

const previews = [
    Toggle({ label: "Enabled", isOn: true, setIsOn: () => {} })
        .previewName("Toggle - On State"),
    Toggle({ label: "Disabled", isOn: false, setIsOn: () => {} })
        .previewName("Toggle - Off State"),
    Toggle({ label: "Disabled", isOn: true, setIsOn: () => {} })
        .disabled(true)
        .previewName("Toggle - Disabled")
];

export default defineComponent({ body, previews });

​
Theme variations

const previews = [
    MyComponent({ label: "Light Theme" })
        .previewName("Light Mode"),
    MyComponent({ label: "Dark Theme" })
        .colorScheme("dark")
        .previewName("Dark Mode"),
    MyComponent({ label: "High Contrast" })
        .environment("contrast", "high")
        .previewName("High Contrast Mode")
];

export default defineComponent({ body, previews });

​
Notes

  • The previewName modifier is only used within the previews array of a component definition
  • Preview names are displayed in component galleries, documentation, and design tools
  • This modifier helps identify different component states and variations
  • Names should be descriptive and clearly indicate what makes each preview unique
  • This is a web-only modifier used for the Metabind CMS preview system