> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Archetype

## Article: Archetype

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/archetype.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";


# Archetype
The `archetype` property is a semantic classification that tells the editor what kind of component you're building. The editor and AI tools use this hint to provide appropriate default behaviors, suggestions, and capabilities for your component.

## Where to define

You can define `archetype` in [`editorElement`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/editor-element.md) and in [`elements`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/elements.md) of type `inlineElement`.

## Archetype values

<PropertyList bordered>
  <Property name="'Accordion'" description="Expandable and collapsible sections for progressive disclosure." />
  <Property name="'AnimatedGraphic'" description="Displays animated graphics, such as Lottie or GIF animations." />
  <Property name="'Audio'" description="Plays audio content with playback controls." />
  <Property name="'Avatar'" description="Displays profile images or initials." />
  <Property name="'Breadcrumbs'" description="Shows a hierarchical navigation path, such as Home > Category > Page." />
  <Property name="'Button'" description="A clickable element for interactions and triggering actions." />
  <Property name="'Captcha'" description="CAPTCHA verification to distinguish humans from bots." />
  <Property name="'Carousel'" description="Rotating slideshow of content items with navigation controls." />
  <Property name="'Cart'" description="E-commerce shopping cart with item management." />
  <Property name="'Checkbox'" description="Boolean selection with checked and unchecked states." />
  <Property name="'ContactForm'" description="Pre-built form for visitor inquiries with email delivery." />
  <Property name="'Container'" description="Groups and organizes child elements. Commonly used for complex composite components." />
  <Property name="'DatePicker'" description="Calendar-based date selection." />
  <Property name="'Divider'" description="Visual separator between sections (for example, lines or shape dividers)." />
  <Property name="'Dropdown'" description="Select 1 or more options from a collapsible list." />
  <Property name="'Frame'" description="Embeds external content in a frame (for example, iframe)." />
  <Property name="'Gallery'" description="Shows a collection of media items in a grid, masonry, or slideshow layout." />
  <Property name="'Image'" description="Displays static images with optional alt text and sizing." />
  <Property name="'Line'" description="Horizontal or vertical line for visual separation." />
  <Property name="'LoginButton'" description="A specialized button for initiating authentication or login flows." />
  <Property name="'Logo'" description="Displays brand logos, typically linked to the home page." />
  <Property name="'Map'" description="Interactive or static map display, such as Google Maps or Mapbox." />
  <Property name="'Menu'" description="Navigation menu with links, dropdowns, or mega-menu layouts." />
  <Property name="'Pagination'" description="Page navigation controls for previous, next, and page numbers." />
  <Property name="'ProgressBar'" description="Shows progress, completion status, or loading state." />
  <Property name="'RadioGroup'" description="Single selection from multiple mutually exclusive options." />
  <Property name="'RatingInput'" description="Allows submitting a rating, typically stars." />
  <Property name="'Ratings'" description="Displays a read-only rating value, such as stars or a score." />
  <Property name="'RichTextEditor'" description="Allows formatting text with a subset of HTML, such as bold, italic, and links." />
  <Property name="'SearchBox'" description="Search input with query submission and optional autocomplete." />
  <Property name="'SignatureInput'" description="Captures handwritten digital signatures." />
  <Property name="'Slider'" description="Selects a numeric value in a defined range." />
  <Property name="'Social'" description="Social media buttons, feeds, or sharing functionality." />
  <Property name="'Switch'" description="Toggle control for on/off boolean selection." />
  <Property name="'Tabs'" description="Organizes content into switchable tabbed panels." />
  <Property name="'Text'" description="Displays static or dynamic text content, such as headings, paragraphs, and labels." />
  <Property name="'TextInput'" description="Single- or multi-line text entry field." />
  <Property name="'TimePicker'" description="Time selection with hour and minute controls." />
  <Property name="'Upload'" description="File upload control for documents, images, or other files." />
  <Property name="'VectorArt'" description="Displays scalable vector graphics (SVG)." />
  <Property name="'Video'" description="Embeds and plays video content with playback controls." />
  <Property name="'UNKNOWN_Archetype'" description="Default when you don't specify an archetype." />
</PropertyList>

## Examples

### Button component

```typescript
editorElement: {
  selector: '.my-button',
  displayName: 'My Button',
  archetype: 'Button',
}
```

## See also

- [About the Editor React Component Manifest](https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/about-the-editor-react-component-manifest.md)