Codex Components

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

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.