codex-components

name	codex-components
description	Catalogue of every Codex Vue component shipped via @wikimedia/codex — what each component is for, the most common props/slots/events, and which ones to reach for in typical Wikipedia UI patterns. Use when you need a button, input, dialog, menu, message, card, tabs, lookup, etc., or when you're picking between similar components ("Lookup vs TypeaheadSearch?").

Codex components

Codex ships 50+ Vue components. They're the building blocks for every Wikimedia UI. Use a Codex component before writing any custom one.

import { CdxButton, CdxField, CdxTextInput, CdxIcon, CdxMessage } from '@wikimedia/codex'

The package is fully tree-shakable — only the components you import end up in your route bundle.

Structure of this skill

This SKILL.md is the index. The full per-component prop / slot / event reference is split across the pages below to keep this page short:

• references/buttons-and-actions.md — CdxButton, CdxButtonGroup, CdxToggleButton, CdxToggleButtonGroup, CdxToggleSwitch, CdxIcon, CdxInfoChip, CdxThumbnail.
• references/inputs-and-forms.md — CdxField, CdxLabel, CdxTextInput, CdxTextArea, CdxCheckbox, CdxRadio, CdxSelect, CdxCombobox, CdxLookup, CdxSearchInput, CdxTypeaheadSearch, CdxAccordion.
• references/feedback-and-status.md — CdxMessage, CdxProgressBar, CdxProgressIndicator, CdxToast, CdxToastContainer.
• references/dialogs-and-overlays.md — CdxDialog, CdxTooltip, CdxMenu, CdxMenuItem, CdxMenuButton, CdxPopover.
• references/structure-and-layout.md — CdxCard, CdxTable, CdxTabs, CdxTab, CdxBreadcrumbs.

When in doubt, the canonical docs are at https://doc.wikimedia.org/codex/.

Pick-the-right-component cheat sheet

You want	Use
A button	CdxButton
A label + helper text + form control	CdxField wrapping the control
A single-line text input	CdxTextInput (or wrap in CdxField)
A multiline text area	CdxTextArea
A <select> with custom styling	CdxSelect
Free-form input + suggestions list	CdxCombobox
Free-form input + suggestions, value can be free text	CdxLookup
A page-wide search bar with typeahead	CdxTypeaheadSearch
A toggle ("dark mode on/off")	CdxToggleSwitch
A pill / segmented selector	CdxToggleButtonGroup
An informational banner	CdxMessage (type="notice")
Inline validation message	CdxMessage (type="warning" / error)
A loading bar	CdxProgressBar (inline for thin)
A spinning indicator inside a button	CdxProgressIndicator
A modal	CdxDialog
A small contextual menu	CdxMenu (or CdxMenuButton for a trigger + menu)
A keyboard-focusable popover	CdxPopover
A row of tabs	CdxTabs + CdxTab
A card with title + content	CdxCard
A table	CdxTable
A breadcrumb trail	CdxBreadcrumbs

Composition patterns

Form field

<CdxField>
  <template #label>Article title</template>
  <template #description>What you'd like to suggest.</template>
  <CdxTextInput v-model="title" />
</CdxField>

Action with progress

<CdxButton :disabled="loading" action="progressive" weight="primary" @click="submit">
  <CdxProgressIndicator v-if="loading" inline />
  Publish
</CdxButton>

Notice + dismiss

<CdxMessage type="warning" :allow-user-dismiss="true" @user-dismissed="hide">
  This is a draft. Changes haven't been saved.
</CdxMessage>

Modal

<CdxDialog
  v-model:open="showModal"
  title="Discard changes?"
  :primary-action="{ label: 'Discard', actionType: 'destructive' }"
  :default-action="{ label: 'Keep editing' }"
  @primary="discard"
  @default="showModal = false"
>
  All unsaved changes will be lost.
</CdxDialog>

Common pitfalls

• Forgetting CdxField. A bare CdxTextInput has no label — wrap it.
• Confusing CdxLookup and CdxTypeaheadSearch. Lookup is for form values (you must pick from suggestions); TypeaheadSearch is for search navigation (you can submit free text, like the wiki search bar).
• Re-importing Codex CSS. It's already global. Don't.
• Wrapping an icon in a button manually. Use <CdxButton> with a child <CdxIcon> — focus styles, hover, sizing all come for free.

See also

• codex-icons for the icon catalogue.
• codex-tokens for the design tokens that drive every component's appearance.
• codex-style-guide for the why — the design rules for links vs buttons, forms, overflow, and the rest.

Inside ProtoWiki

ProtoWiki composes these primitives into wrappers (ChromeWrapper, SpecialPageWrapper, PlainWrapper) and reader surfaces (ArticleWrapper, ArticleRenderer, ArticleLive, ArticleSnapshot, ArticleCustom, …; Search wraps CdxTypeaheadSearch). See protowiki-components.