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.

Core building blocks in the library

These are the base UI pieces in the Avonni LWC Components library.

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.
• Pagination — page buttons with previous, next and bookend controls.
• 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).