Base Web Awesome component with common attributes and behaviors

any

depends-on-implementation

true

Buttons represent actions that are available to the user

any

any-content,wa-icon,wa-spinner

true

label,start,end

Button groups arrange buttons into horizontal or vertical groups

any

wa-button

true Copies text data to the clipboard when clicked

any

any-content

true Dropdowns expose contextual overlays for displaying lists of links and more

any

wa-button,wa-menu,wa-dropdown-item

true

trigger

Individual item in a dropdown menu

wa-dropdown,wa-menu

any-content,wa-icon

true Generates QR codes dynamically

any

none

false Badges are small status indicators

any

any-content

true Callouts display informative messages or alerts

any

any-content,wa-icon

true

icon

Progress bars show the progress of a determinate or indeterminate operation

any

none

false Progress rings show the progress of an operation in a circular format

any

any-content

true Skeletons indicate content is loading

any

none

false Spinners indicate an operation is in progress

any

none

false Tags are used to label items

any

any-content,wa-icon

true Tooltips display additional information on hover

any

any-content

true Checkboxes allow users to toggle between checked and unchecked states

any

any-content

true Color pickers allow users to select a color

any

none

false Inputs allow users to enter text

any

wa-icon

true

label,prefix,suffix,clear-icon,show-password-icon,hide-password-icon,help-text

Options are used within wa-select

wa-select

any-content,wa-icon

true Radio buttons allow users to select a single option from a group

wa-radio-group,any

any-content

true Radio groups organize radio buttons

any

wa-radio,wa-radio-button

true Ratings allow users to rate something

any

none

false Selects allow users to choose one or more items from a dropdown

any

wa-option,wa-divider

true

label,prefix,clear-icon,expand-icon,tag,help-text

Sliders allow users to select a value from a range

any

none

false Switches allow users to toggle between two states

any

any-content

true Textareas allow users to enter multiple lines of text

any

none

false Displays animated GIFs and WEBPs that play on hover

any

wa-icon

true Avatars display user profile pictures

any

wa-icon

true Carousels display a collection of items

any

wa-carousel-item

true Individual item within a carousel

wa-carousel

any-content

true Compare two items side by side

any

any-content

true

before,after

Icons are symbols that represent an object, concept, or action

any

none

false Frame that allows zooming and panning of content

any

any-content

true Breadcrumbs show hierarchy and navigational context

any

wa-breadcrumb-item

true Individual item in a breadcrumb trail

wa-breadcrumb

any-content,wa-icon

true Individual tab within a tab group

wa-tab-group

any-content,wa-icon

true Tab groups organize content into tabs

any

wa-tab,wa-tab-panel

true Panel content for a tab

wa-tab-group

any-content

true Trees display hierarchical data

any

wa-tree-item

true Individual item within a tree

wa-tree,wa-tree-item

wa-tree-item,any-content,wa-icon

true Cards contain content and actions about a single subject

any

any-content

true

header,body,footer,image

Details show a summary and expand to show content

any

any-content,wa-icon

true

summary,expand-icon,collapse-icon

Dialogs display content in a layer above the page

any

any-content

true

label,header,body,footer

Dividers visually separate content

any

none

false Drawers slide in from the side of the screen

any

any-content

true

label,header,body,footer

PRO: Page layout component with responsive behavior

any

any-content

true

header,navigation,content,sidebar,footer

Custom scrollable container

any

any-content

true Split panels divide content into resizable sections

any

any-content

true

start,end

Animates elements declaratively

any

any-content

true Formats bytes as human readable text

any

none

false Formats dates in a localized manner

any

none

false Formats numbers in a localized manner

any

none

false Includes external HTML files into the page

any

none

false Declarative interface to the MutationObserver API

any

any-content

true Contextual overlays that display additional content

any

any-content

true

trigger,content

Popup containers for tooltips, popovers, etc.

any

any-content

true Displays relative time in a human-readable format

any

none

false Declarative interface to the ResizeObserver API

any

any-content

true Visually hides content while keeping it accessible to screen readers

any

any-content

true Menu structure for dropdowns and context menus

wa-dropdown,wa-popover

wa-dropdown-item,wa-divider

true Form field wrapper with label and help text

any

wa-input,wa-select,wa-textarea,wa-checkbox,wa-radio-group,wa-switch

true

input

Standard Web Awesome application layout with header, navigation, and content areas Standard form layout with validation and submit buttons Standard dialog layout with header, body, and footer Grid layout for cards

{title}