duo-avatar
Avatar
Show a person or entity with a photo, icon, initials, or slotted content.
Components
Reusable Duo web components for actions, forms, feedback, layout, and navigation—documented for consistent, accessible product UIs.
Component library
Duo components are interactive building blocks for Talentech products. Each entry links to usage guidance, props, accessibility notes, and Storybook examples where available.
34 components
-
- duo-badge
Badge
Compact status or count label from @duo/ui.
- duo-box
Box
Groups and separates content (notes in prose, cards in grids, dialog bodies).
- duo-brand-attribution
Brand attribution
Platform attribution with the Talentech wordmark and a “Powered by” label.
- duo-button
Button
Action control with native <button> or <a> semantics, variants, loading, and slots for icon/badge.
- duo-card
Card
Grouped content surface with optional media, header, body, and footer actions.
- duo-center
Center
Center content horizontally with optional gutters, max width, and text alignment.
- duo-chip
Chip
Compact colored label with optional icon and dismiss control.
- duo-confirm-button
Confirm button
Two-step inline confirmation that turns a default button into a danger button after the first click.
-
Cookie banner
First-party cookie consent modal for kuntarekry and kirkkorekry, with bundled fi, en, and sv content.
- duo-cover
Cover
Column layout with optional top band, a growing centered main region, and optional bottom band.
- duo-databox
Databox
Compact metric tile with a prominent value, supporting label, and optional trend.
- duo-description-list
Description list
Semantic term/value rows for labelled metadata and amounts.
- duo-divider
Divider
Separate content with a horizontal rule and optional centered label text.
- duo-editor
Editor
Rich text editor with Duo-themed Froala toolbar presets.
- duo-empty-state
Empty state
Communicate an empty dataset or unavailable feature with copy and optional actions.
- duo-field
Field
Wrapper for native form controls in the light DOM.
- duo-file-input
File input
Segmented native file picker with filename field, browse, and optional clear.
- duo-icon
Icon
Inline SVG icon from @duo/icons.
- duo-list
List
Stacked rows with optional title, wrapper, and split-header groups.
- duo-list-group
List group
Group list rows with shared borders and separators.
- duo-modal
Modal
Blocking dialog with header, body, and footer actions.
- duo-otp-input
OTP input
Collect a fixed-length numeric one-time code in separate digit cells.
- duo-price
Price
Right-aligned monetary amount with optional currency suffix from @duo/ui.
- duo-section
Section
Grouped content with optional title, subtitle, header actions, and a surface variant.
- duo-sidebar
Sidebar
Responsive sidebar layout.
- duo-stack
Stack
Generic flex stack utility component for vertical/horizontal layouts..
- duo-stepper
Stepper
Horizontal step progress with numbered, current, and complete states.
- duo-table
Table
Style wrapper for native HTML tables in the light DOM.
- duo-tag
Tag
Short label or category marker..
- duo-visually-hidden
Visually hidden
Hide copy from the visual layout while keeping it available to assistive technology.
- duo-radio-card-group
Radio card
Selectable card options in a vertical radio group with optional badges and trailing content.
- duo-banner
Banner
Inline alert-style messaging from @duo/ui.
- duo-poster
Poster
Full-height or inline promotional panel with copy and an illustration.
No components match that search.