"},{"ID":372022,"user_firstname":"Isaac","user_lastname":"Braun","nickname":"Isaac Braun","user_nicename":"ibraun","display_name":"Isaac Braun","user_email":"ibraun@esri.com","user_url":"","user_registered":"2025-05-27 15:34:49","user_description":"Isaac is a Product Engineer based in Redlands, CA who is passionate about crafting intuitive and beautiful user experiences. Working in web development since 2020, he joined the Calcite Design System team at Esri in 2025. Beyond software, he enjoys playing piano and singing, woodworking, playing video games, taking photos, cycling, and exploring the outdoors.","user_avatar":"
"}],"short_description":"Explore what's new in February 2026 to Calcite Design System, including initiatives and improvements to help you build a user-friendly UI\/UX.","flexible_content":[{"acf_fc_layout":"image","image":{"ID":2954829,"id":2954829,"title":"","filename":"Banner_-826px-x-465px.png","filesize":270528,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/01\/Banner_-826px-x-465px.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-5-0-released\/banner_-826px-x-465px","alt":"","author":"309572","description":"","caption":"","name":"banner_-826px-x-465px","status":"inherit","uploaded_to":2954685,"date":"2026-01-27 21:01:01","modified":"2026-01-27 21:01:10","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":826,"height":465,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/01\/Banner_-826px-x-465px-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/01\/Banner_-826px-x-465px.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/01\/Banner_-826px-x-465px.png","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/01\/Banner_-826px-x-465px.png","large-width":826,"large-height":465,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/01\/Banner_-826px-x-465px.png","1536x1536-width":826,"1536x1536-height":465,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/01\/Banner_-826px-x-465px.png","2048x2048-width":826,"2048x2048-height":465,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/01\/Banner_-826px-x-465px.png","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/01\/Banner_-826px-x-465px.png","wide_image-width":826,"wide_image-height":465}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Read on to explore some of the highlights since September, including:<\/p>\n
- \n
- CDN naming convention<\/a><\/li>\n
- Action redesign<\/a><\/li>\n
- Disabled fullscreen functionality in Dialog<\/a><\/li>\n
- Component grouping UI\/UX<\/a><\/li>\n
- Refined prefix and suffix text<\/a><\/li>\n
- Enhanced pagination in Table<\/a><\/li>\n
- Action Group’s selection mode<\/a><\/li>\n
- Accessibility improvements<\/a><\/li>\n
- 5.0 breaking change highlights<\/a><\/li>\n<\/ul>\n"},{"acf_fc_layout":"content","content":"
CDN naming convention<\/h2>\n
Calcite and ArcGIS Maps SDK for JavaScript<\/a> now offer coordinated versioning and CDN naming consistencies with version 5.0. The updated CDN improves productivity and enhances tooling support across solutions:<\/p>\n
\r\n<script<\/span> type<\/span>=\"module\"<\/span> src<\/span>=\"https:\/\/js.arcgis.com\/calcite-components\/5.0\"<\/span>><\/script<\/span>>\r\n\r\n<\/code><\/pre>\nWhen creating apps using JavaScript Maps SDK you can reference a single CDN script tag, which includes: Calcite components, the Core API<\/a>, Map components<\/a>, Charts components<\/a>, Coding components<\/a>, Common components<\/a>, and AI components<\/a> (beta<\/em>):<\/p>\n
\r\n<script<\/span> type<\/span>=\"module\"<\/span> src<\/span>=\"https:\/\/js.arcgis.com\/5.0\"<\/span>><\/script<\/span>>\r\n\r\n<\/code><\/pre>\nExplore Calcite’s get started page<\/a> to learn more about using the CDN and how to host assets locally for additional setup considerations.<\/p>\n"},{"acf_fc_layout":"content","content":"
Action redesign<\/h2>\n
Action<\/a> has been updated to support more use cases – the default sizing has been adjusted and the component now supports a highlight display appearance.<\/span><\/p>\n
![\"Action](\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/02\/5.0-action-selection-appearance.png\")
<\/p>\n"},{"acf_fc_layout":"content","content":"Disabled fullscreen functionality in Dialog<\/h2>\n
Dialog<\/a>\u00a0now includes a\u00a0
fullscreenDisabled<\/code> property, which prevents the component’s full viewport display that blocks all visibility of underlying content on smaller width viewports. The property provides more configuration control over how the component and underlying content can be presented across screen resolutions, in particular mobile and tablet devices.<\/p>\n![\"Comparison](\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/02\/5.0-dialog-fullscreen-disabled-comparison.png\")
<\/p>\n"},{"acf_fc_layout":"content","content":"Component grouping UI\/UX<\/h2>\n
The Dropdown Group<\/a>, Combobox Item Group<\/a>, and List Item Group<\/a> components offer uniform UI\/UX experiences in 5.0 with updated font weights and color improvements for consistent experiences across apps.<\/p>\n
![\"Component](\"https:\/\/developers.arcgis.com\/calcite-design-system\/static\/b6394dfe7da340c5f5ff893989094347\/4cdf7\/initiatives-grouping.png\")
<\/p>\n"},{"acf_fc_layout":"content","content":"Refined prefix and suffix text<\/h2>\n
The\u00a0Input<\/a>,\u00a0Input Number<\/a>, and\u00a0Input Text<\/a>\u00a0components have refined the visual display of their\u00a0
prefixText<\/code>\u00a0and\u00a0suffixText<\/code> properties, reducing the possibility of mistaking them as clickable elements and promoting proper UI\/UX decisions, ensuring users have less visual noise and clearer directions.<\/p>\n![\"Comparison](\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/02\/5.0-inputs-prefix-suffix.png\")
<\/p>\n"},{"acf_fc_layout":"content","content":"Enhanced pagination in Table<\/h2>\n
Table<\/a> introduces a
currentPage<\/code> property, providing the ability to get or set the component’s current page when pagination is enabled. The property is useful to set the initial page on render, retrieve the current page, or programmatically change pages. Learn more in Calcite’s 5.0 summary notes<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":"Action Group’s selection mode<\/h2>\n
Action Group<\/a> now supports more control over the selection behavior of slotted Actions<\/a> with the new
selectionMode<\/code> property. For example, the\"single-persist\"<\/code> value allows one selection, preventing deselection from the group.<\/p>\n![\"Action](\"https:\/\/developers.arcgis.com\/calcite-design-system\/static\/228353ce28a888944c97dca5f83a43e0\/4cdf7\/initiatives-action-redesign-2.png\")
<\/p>\n"},{"acf_fc_layout":"content","content":"Accessibility improvements<\/h2>\n
Action’s
aria<\/code> property<\/h3>\nAction<\/a>\u00a0offers a new\u00a0
aria<\/code>\u00a0property, which overrides or extends\u00a0ARIA<\/a>-named attributes on the component’s button. For instance, the property can provide assistive technologies more context when an Action toggles another component’s visibility. Refer to\u00a0Action’s accessibility section<\/a> for configuration considerations.<\/p>\nCombobox’s read-only support<\/h3>\n
Combobox<\/a> supports more audiences when it is not editable, but its contents are available to users. Now in 5.0, the component communicates it’s value to assistive technologies when in read-only mode.<\/p>\n"},{"acf_fc_layout":"content","content":"
5.0 breaking change highlights<\/h2>\n
Removed deprecated APIs<\/h3>\n
With the 5.0 release, Calcite removed deprecated components, properties, values, slots, and events. For instance, Action<\/a>‘s\u00a0
tooltip<\/code> slot where the Tooltip<\/a> component can be used directly instead.<\/p>\nRemoved components in 5.0 include: Modal, Shell Center Row, Tile Select, Tile Select Group, Tip, Tip Group, and Tip Manager.<\/p>\n
To learn more about the full list of removals, visit the removed components<\/a>, properties<\/a>, values<\/a>, slots<\/a>, and events<\/a> in the summary notes for the migration steps needed for 5.0.<\/p>\n
Notice\u2019s design updates<\/h3>\n
Notice<\/a> now offers a minimal appearance, providing further visual distinction from the Alert<\/a> component. In 5.0, Notice supports a range of inline message styling options, including an outline fill appearance for visual emphasis and a transparent appearance for less obtrusive messages.<\/span><\/p>\n
![\"Notice](\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/02\/5.0-notice-default-transparent-appearance.png\")
<\/p>\nDark mode color mapping<\/h3>\n
Dark mode color mapping has been updated to align with light mode by ensuring background colors remain darker than foreground colors.
\n![\"Comparison](\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/02\/5.0-calcite-dark-mode-mapping.png\")
<\/p>\nColor token naming updates<\/h3>\n
The
background<\/code> andforeground<\/code> color tokens have been deprecated in favor of a combined set ofsurface<\/code> color tokens, making color usage and theming easier to manage. To learn more about color tokens and theming, visit Calcite\u2019s Colors and theming<\/a> page.<\/p>\nFramework integration<\/h3>\n
With React 19+’s support of custom elements, the
@esri\/calcite-components-react<\/code> package is not needed and deprecated in 5.0, with removal in a future breaking change release. Consider upgrading to React 19+ and using@esri\/calcite-components<\/code> directly to ensure full compatibility and support for the future.<\/p>\n"},{"acf_fc_layout":"content","content":"Explore what’s new in 5.0<\/h2>\n
For a full list of changes, visit Calcite’s 5.0 summary notes<\/a>, which also lists changes since version 3.3 (October 2025)<\/a>\u00a0including breaking changes, features, bug fixes, performance improvements, and more.<\/p>\n
YouTube live<\/h3>\n
Earlier this month Calcite designers and engineers presented the Latest Updates in Version 5.0 showcasing breaking changes, feature enhancements, and engaged in a live Q&A session. Thank you to all who attended with us live. The event was recorded<\/a> and is available for viewing.<\/p>\n"},{"acf_fc_layout":"youtube","start_time":"0","end_time":"","youtube_video_url":"
- Action redesign<\/a><\/li>\n