Overview

Core Components are Avonni's base UI building blocks — avatars, badges, cards, pickers, sliders, progress indicators, media players, layout, and more. Each is a presentational Lightning Web Component you reference as an avonni-<name> tag in your own component's HTML template and configure through its attributes.

Documented components

• Alert Banner — dismissible inline notification banner.
• Audio Player — audio playback with custom controls.
• Avatar — identity display with image, initials, status, and actions.
• Avatar Group — a collection of avatars with overflow handling.
• Badge — compact status / category indicator.
• Barcode — render barcodes and QR codes from a value.
• Blockquote — styled quote / callout block.
• Card — flexible content container with media and slots.
• Carousel — sliding panels of items with indicators and actions.
• Chip Container — collection of chips with optional reordering.
• Choice Set — single/multi choice input (buttons or list).
• Color Gradient — gradient color selector.
• Color Palette — swatch-based color selector.
• Color Picker — full color input with palettes and opacity.
• Combobox — searchable single/multi-select dropdown.
• Counter — numeric input with increment/decrement controls.
• Date Picker — date input with a calendar dropdown.
• Date Range — start/end date or datetime input.
• Date Time Picker — date and time slot selection.
• Dual Listbox — move items between source and selected lists.
• Dynamic Menu — button menu with rich, searchable items.
• Expandable Section — collapsible content section.
• Filter Menu — filter dropdown (list, range, date types).
• Filter Menu Group — a group of coordinated filter menus.
• Header — page/section header with slots for actions and details.
• Icon Picker — searchable SLDS icon selector.
• Illustration — empty-state illustration with text.
• Layout — responsive flex layout container.
• Layout Item — sized, alignable child of Layout.
• Metric — KPI value with formatting, trend, and avatar.
• Microphone — audio recording with optional save.
• Pill Container — collection of pills with actions and reordering.
• Progress Bar — linear progress indicator with reference lines.
• Progress Circle — circular progress indicator.
• Progress Indicator — multi-step progress tracker.
• Rating — star/icon rating input.
• Signature Pad — capture handwritten signatures.
• Slider — single or range value slider.
• Status — value mapped to predefined visual states.
• Vertical Visual Picker — stacked card-style choices.
• Video Player — video playback (hosted, YouTube, Vimeo).
• Visual Picker — card/tile selection control.
• Visual Picker Link — link-style visual picker.

What a component page covers

Each page opens with the component's avonni-* tag and a one-line description, then splits into two tabs:

• Develop — overview, configuration guidelines, copy-paste code examples, key considerations, and troubleshooting.
• Specifications — the API reference: attributes, methods, slots, custom events, and styling hooks (only the sections a component actually has).