# Warp Elements Component Documentation

Generated by `pnpm build:docs`. This file indexes the Markdown documentation shipped with `@warp-ds/elements`.

- Package export: `@warp-ds/elements/docs`
- Component docs export pattern: `@warp-ds/elements/docs/<component>/<component>.md`

## Components

| Component | Element / API | Package | Summary | Docs |
|-|-|-|-|-|
| Affix | `<w-affix>` | `affix` | This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`. Warp component reference | [affix.md](./affix/affix.md) |
| Alert | `<w-alert>` | `alert` | Alert is an inline component used for displaying different types of messages. Warp component reference | [alert.md](./alert/alert.md) |
| Attention | `<w-attention>` | `attention` | Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior. Attention is a versatile component for displaying contextual information and messages. It can be used for a wide range of purposes, such as tooltips, callouts, popovers, and highlights. The component is designed to be anchored to a trigger element, providing contextual information related to that element. It supports various placements and styling options to accommodate different use cases and design needs. Warp component reference | [attention.md](./attention/attention.md) |
| Badge | `<w-badge>` | `badge` | `w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count. | [badge.md](./badge/badge.md) |
| Box | `<w-box>` | `box` | Box is a layout component used for separating content areas on a page. Warp component reference | [box.md](./box/box.md) |
| Breadcrumb Item | `<w-breadcrumb-item>` | `breadcrumb-item` | Represents one item in a `w-breadcrumbs` trail. Renders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items. Warp component reference | [breadcrumb-item.md](./breadcrumb-item/breadcrumb-item.md) |
| Breadcrumbs | `<w-breadcrumbs>` | `breadcrumbs` | Shows the navigation structure for the current page. Renders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation. Warp component reference | [breadcrumbs.md](./breadcrumbs/breadcrumbs.md) |
| Button | `<w-button>` | `button` | Performs an action or renders a link with button styling. Use button variants to match action priority, risk, and context. Warp component reference | [button.md](./button/button.md) |
| Card | `<w-card>` | `card` | Card is a layout component used for grouping interactive content areas on a page. Warp component reference | [card.md](./card/card.md) |
| Checkbox | `<w-checkbox>` | `checkbox` | Checkboxes allow users to select one or more options from a number of choices. Wrap individual checkboxes in a checkbox group. Warp component reference | [checkbox.md](./checkbox/checkbox.md) |
| Checkbox Group | `<w-checkbox-group>` | `checkbox-group` | Checkboxes allow users to select one or more options from a number of choices. Wrap individual checkboxes in a checkbox group. Warp component reference | [checkbox-group.md](./checkbox-group/checkbox-group.md) |
| Combobox | `<w-combobox>` | `combobox` | A combobox element for text input with selectable options. Warp component reference | [combobox.md](./combobox/combobox.md) |
| Datepicker | `<w-datepicker>` | `datepicker` | A date picker allows the user to select a specific calendar date. Warp component reference | [datepicker.md](./datepicker/datepicker.md) |
| Expandable | `<w-expandable>` | `expandable` | Expandable is a layout component used for creating expandable content areas on a page. Warp component reference | [expandable.md](./expandable/expandable.md) |
| Icon | `<w-icon>` | `icon` | Warp component reference | [icon.md](./icon/icon.md) |
| Link | `<w-link>` | `link` | Link component to use when creating links that look like buttons. Warp component reference | [link.md](./link/link.md) |
| Modal | `<w-modal>` | `modal` | Modals (or dialogs) display important information that users need to acknowledge. Warp component reference | [modal.md](./modal/modal.md) |
| Modal Footer | `<w-modal-footer>` | `modal-footer` | The footer section of a modal, typically where you place actions. Warp component reference | [modal-footer.md](./modal-footer/modal-footer.md) |
| Modal Header | `<w-modal-header>` | `modal-header` | The header section of a modal, typically where you place the title and a close button. Warp component reference | [modal-header.md](./modal-header/modal-header.md) |
| Page Indicator | `<w-page-indicator>` | `page-indicator` | A page indicator component that displays a series of dots representing pages. One dot is highlighted to indicate the currently selected page. Warp component reference | [page-indicator.md](./page-indicator/page-indicator.md) |
| Pagination | `<w-pagination>` | `pagination` | Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows. Warp component reference | [pagination.md](./pagination/pagination.md) |
| Pill | `<w-pill>` | `pill` | Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc. Warp component reference | [pill.md](./pill/pill.md) |
| Radio | `<w-radio>` | `radio` | Radios allow users to select a single option from a list of choices. Wrap individual radio components in a radio group. Warp component reference | [radio.md](./radio/radio.md) |
| Radio Group | `<w-radio-group>` | `radio-group` | Radios allow users to select a single option from a list of choices. Wrap individual radio components in a radio group. Warp component reference | [radio-group.md](./radio-group/radio-group.md) |
| Select | `<w-select>` | `select` | A dropdown component for selecting a single value. Warp component reference | [select.md](./select/select.md) |
| Slider | `<w-slider>` | `slider` | Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`. Warp component reference | [slider.md](./slider/slider.md) |
| Slider Thumb | `<w-slider-thumb>` | `slider-thumb` | Component to place inside a `<w-slider>`. | [slider-thumb.md](./slider-thumb/slider-thumb.md) |
| Snackbar | `<w-snackbar>` | `snackbar` | A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo. Include one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages. Warp component reference | [snackbar.md](./snackbar/snackbar.md) |
| Snackbar Item | `<w-snackbar-item>` | `snackbar-item` | An item to show in a `w-snackbar`. See the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items. Warp component reference | [snackbar-item.md](./snackbar-item/snackbar-item.md) |
| Step | `<w-step>` | `step` | Individual step component that shows a single step in a process. Warp component reference | [step.md](./step/step.md) |
| Step Indicator | `<w-step-indicator>` | `step-indicator` | Steps are used to show progress through a process or to guide users through a multi-step task. Warp component reference | [step-indicator.md](./step-indicator/step-indicator.md) |
| Switch | `<w-switch>` | `switch` | The Switch component allows users to toggle between two states. Warp component reference | [switch.md](./switch/switch.md) |
| Tab | `<w-tab>` | `tab` | Individual tab component used within w-tabs container. Warp component reference | [tab.md](./tab/tab.md) |
| Tab Panel | `<w-tab-panel>` | `tab-panel` | Tab panel component that holds content for individual tabs. Each tab panel should have a name that matches a corresponding tab. Warp component reference | [tab-panel.md](./tab-panel/tab-panel.md) |
| Tabs | `<w-tabs>` | `tabs` | Tabs are used to organize content by grouping similar information on the same page. Warp component reference | [tabs.md](./tabs/tabs.md) |
| Textarea | `<w-textarea>` | `textarea` | A multi-line text input with built-in form validation, auto-resizing, and styling support. Warp component reference | [textarea.md](./textarea/textarea.md) |
| Textfield | `<w-textfield>` | `textfield` | A single-line input component used for entering and editing textual or numeric data. Warp component reference | [textfield.md](./textfield/textfield.md) |
| Toast | `@warp-ds/elements/toast` | `toast` | Toasts are brief user feedback messages that overlay content. | [toast.md](./toast/toast.md) |
| Tooltip | `<w-tooltip>` | `tooltip` | A tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element. Tooltips should be used sparingly and contain succinct, supplementary information. | [tooltip.md](./tooltip/tooltip.md) |