Calcite components are a distributed set of composable, purpose-built web components for building great web experiences.
![](/calcite-design-system/static/1513e753c8f7c1fde6908db16fea1d98/1c406/thumbnail-accordion.png)
Accordion
![](/calcite-design-system/static/369eb6e3a07da960c3b33d45a301607f/1c406/thumbnail-action.png)
Action
![](/calcite-design-system/static/f57c0f599baf96a4ee400e191d6a819f/1c406/thumbnail-action-bar.png)
Action Bar
![](/calcite-design-system/static/77ede4ee152e22a45531694ece2c3163/1c406/thumbnail-action-pad.png)
Action Pad
![](/calcite-design-system/static/6a7ea662fc6ad474e12339372f6afbb1/1c406/thumbnail-alert.png)
Alert
![](/calcite-design-system/static/a5b5fbfac19e85fc84f3ea34a44a5b46/1c406/thumbnail-avatar.png)
Avatar
![](/calcite-design-system/static/1f7116202444d566a93483a198ae8be7/1c406/thumbnail-block.png)
Block
![](/calcite-design-system/static/a8c61a7256dbe2a27b8b841b2fab6103/0aa37/thumbnail-button.png)
Button
![](/calcite-design-system/static/4b1084ee4d28ea991ae07f04d5888257/1c406/thumbnail-card.png)
Card
![](/calcite-design-system/static/957a17ec8778cd6f2cf14048aeb5fa87/1c406/thumbnail-checkbox.png)
Checkbox
![](/calcite-design-system/static/3345753896f7a238c35c8d15e6b78295/1c406/thumbnail-chip.png)
Chip
![](/calcite-design-system/static/7b09fd37360fd19c2a4f8cf475e5b429/d42db/thumbnail-color.png)
Color Picker
![](/calcite-design-system/static/a07bc0d59de3103c37fb766d276b246b/0aa37/thumbnail-combobox.png)
Combobox
![](/calcite-design-system/static/d2221a78b7a3c565ea23c64d1987a110/1c406/thumbnail-date.png)
Date Picker
![](/calcite-design-system/static/658549eecf4de3f6ef1ec9a5fcdee5ef/1c406/thumbnail-dropdown.png)
Dropdown
![](/calcite-design-system/static/244f638e2b4a8573a25d9d60de9ad5c6/d42db/thumbnail-fab.png)
FAB
![](/calcite-design-system/static/6882403f8e615183bebe9186cbebc6db/0aa37/thumbnail-flow.png)
Flow
![](/calcite-design-system/static/c03f08fae61230ab0f2311c880146c93/1c406/thumbnail-icon.png)
Icon
![](/calcite-design-system/static/bd60ef00d3486395d1d9aa455a4270d4/1c406/thumbnail-input.png)
Input
![](/calcite-design-system/static/6072db4b26de59a9c41f9df9aece4d52/1c406/thumbnail-label.png)
Label
![](/calcite-design-system/static/50f09c5756a33f0b4c238df7c7c76fad/1c406/thumbnail-link.png)
Link
![](/calcite-design-system/static/d6ebbd8edfd054d045c88f052935038c/1c406/thumbnail-loader.png)
Loader
![](/calcite-design-system/static/80477ed12dd5e6859d0701441a6e096c/1c406/thumbnail-modal.png)
Modal
![](/calcite-design-system/static/4b00b0304ba07514a41190765d32bdb4/1c406/thumbnail-notice.png)
Notice
![](/calcite-design-system/static/6b11e6642a2ec2179e875ea3aa583727/1c406/thumbnail-pagination.png)
Pagination
![](/calcite-design-system/static/5a1bab7971c406ad12385d05790b7ad8/1c406/thumbnail-panel.png)
Panel
![](/calcite-design-system/static/65eb7e0e10f1034f3e8a6a5b869f9ce9/1c406/thumbnail-pick-list.png)
Pick List
![](/calcite-design-system/static/a36a95e15c1f13f91fcef22fff5465e2/1c406/thumbnail-popover.png)
Popover
![](/calcite-design-system/static/25db85248cb74d6013b124aba76fcda1/1c406/thumbnail-progress.png)
Progress
![](/calcite-design-system/static/b222d87fcded6a3a01de5d637d7371e8/1c406/thumbnail-radio-button.png)
Radio Button
![](/calcite-design-system/static/3f2bfad4dcee659e9f881bf86881a241/d42db/thumbnail-radio-button-group.png)
Radio Button Group
![](/calcite-design-system/static/636b780083d9c5db3a2612294c6313d8/d42db/thumbnail-rating.png)
Rating
![](/calcite-design-system/static/96ee86da685955079728a605ab6dda2f/1c406/thumbnail-segmented-control.png)
Segmented Control
![](/calcite-design-system/static/008f1c598f60caa995f5cdf87a5dfc22/d42db/thumbnail-select.png)
Select
![](/calcite-design-system/static/b76a3bf432195ed5be464b716dde8938/d42db/thumbnail-scrim.png)
Scrim
![](/calcite-design-system/static/1f9fba08134ff820eadf80b552e49c6f/1c406/thumbnail-slider.png)
Slider
![](/calcite-design-system/static/eca6d9a59d401f49367363669502712e/1c406/thumbnail-stepper.png)
Stepper
![](/calcite-design-system/static/ee34430cb14b1c21898343c067af3259/0aa37/thumbnail-switch.png)
Switch
![](/calcite-design-system/static/a7e13f56594e06e1638a49745c7bb892/1c406/thumbnail-tabs.png)
Tabs
![](/calcite-design-system/static/b4cd05d05ae958e49519acd867e9eb98/00263/thumbnail-tile.png)
Tile
![](/calcite-design-system/static/8f1137f8698400656c82b539a68a29fc/d42db/thumbnail-tile-select.png)
Tile Select
![](/calcite-design-system/static/d91b05892b489c657ab9fe8db8e6a084/d42db/thumbnail-tile-select-group.png)
Tile Select Group
![](/calcite-design-system/static/d0450c740ca3ab83ad00841dc3e9e108/1c406/thumbnail-tooltip.png)
Tooltip
![](/calcite-design-system/static/c3e9e1252d55a59c2a12d83aa5903833/1c406/thumbnail-tree.png)
Tree
![](/calcite-design-system/static/71b5651dc09a1bce801a738e0f1f1715/1c406/thumbnail-tip.png)
Tip
![](/calcite-design-system/static/143d400e6a71dda6435ef430eaa15efd/1c406/thumbnail-value-list.png)