Design

Design library contains the coded Skapa Components.

Version 3.5.0

Mar 31, 2026

Latest Updates

net.ikea.skapa:design:3.5.0

Dual button

• Improvement Pressed animation is smoother for Secondary variant.

Button, Icon button, Jumbo button

• A11y Removed LoadingBall node from Talkback scope since we already have loading semantics in Button node.

Card, Compact Card

• Experimental feature Added modifier to media container Image, aspect ratio is now optional for improved user control.

• Improvement Re organized input parameters for MediaContainer.Image data class to align with all cards.

Compact Card

• Improvement More Title sizes for CompactCard. Small, Medium, and Large sizes are now available. The new default is Large which maps to the previous deprecated default.

• Deprecation Title sizes Regular and XSmall have been deprecated and replaced with Large and Small respectively.

Inline message

• Improvement The buttons now support icons.

Price, Price module

• Improvement Migrated Price to the new typography system which makes the components compatible with changes in BaseFontSize.

Segmented control

• A11y Added pressed animation for visual feedback.

• Improvement Reduced horizontal padding for Text variant to align with updates in Figma main component.

• Bug fix Background selection mis-aligned when using many items.

Search

• Experimental Feature Removed the navigation button from the expanded TextFieldValue Search component; navigation is not part of the Search scope and should be handled at the view level.

Simple Video, Card, Compact Card, Text Overlay Card

• Improvement Exposed controlsContentPadding: PaddingValues on SimpleVideo, MediaContainer.Video, CompactMediaContainer.Video, and TextOverlayMediaContainer.Video to allow callers to apply safe-area insets to the video controls row in edge-to-edge layouts. Defaults to PaddingValues() preserving existing behaviour.

Text Overlay Card

• Bugfix Fixed issue where if text / gradient overlay scaled too large, it would cover the Simple Video controls, and extend beyond the media content.

• A11y Keyboard navigation borders were not working as expected.

• Experimental feature Added modifier to media container Image, aspect ratio is now optional for improved user control.

• Improvement Re organized input parameters for MediaContainer.Image data class to align with all cards.

Toggle

• Deprecation The Toggle component has been deprecated in favor of Segmented Control.

net.ikea.skapa:design:3.4.0

Button, Jumbo button, Pill

• Improvement Migrated to the new typography system which makes the components compatible with changes in BaseFontSize. Note: This change affects all components where Buttons and Pills are included.

Card, Compact card

• Experimental Feature Removed non-optional aspectRatio modifier from Custom media container constructor, and updated the custom container to a Box instead of an AspectRatioBox. This will give more control to the user through the exposed modifier.

• Experimental Feature aspectRatio parameter for Video media container is now optional, introduced modifier parameter for more niche use-cases.

• Bugfix Fixed issue where Simple card variants footer icon would not mirror in RTL view.

Carousel, Tabs

• A11y For accessibility compliance, the navigation buttons, NavButtonsParams, used in Carousel and Tabs (scrollable) can now be set to "always visible" instead of previously only shown with hover.

Checkbox, Tristate checkbox

• New Feature Added support to show components as required with a leading asterisk (*).

Input field, Text area, Dropdown, Select, Checkbox group, Radio button group

• New Feature Added support to show components as required with a leading asterisk (*) in top label. Not applicable for Disabled and ReadOnly fields.

Menu item

• Improvement Added Ripple for pressed state.

Quantity stepper

• Improvement Added valueMultiplier and readOnlyInputField parameters.

• valueMultiplier is the exposed value at which the value is incremented or decremented by.

• readOnlyInputField locks the input-field to read-only. D-pad (arrow keys) is still usable to increment or decrement the value.

Segmented control

• New Feature Added support for XSmall icon variant.

• Bug Fix Updated some paddings and borders to match Figma design better.

Sheet

• Improvement Added SheetDefaults to provide default values for Sheet.

• Improvement Updated contentWindowInsets default to use SheetDefaults.windowInsets based on safe drawing window insets.

Text Overlay card

• New Feature Added label to card. This label is shown above the title.

• Improvement Addon now moved to top start of card instead of above title.

• Improvement Updated the accessibility overlay gradient behind text to improve contrast and readability.

• Improvement New title sizes: Large, Medium, Small.

• Deprecation Title size Regular has been deprecated and replaced with Large. The default titleSize has changed from Regular to Large.

• Experimental Feature Removed non-optional aspectRatio modifier from Custom media container constructor, and updated the custom container to a Box instead of a AspectRatioBox. This will give more control to the user through the exposed modifier.

• Experimental Feature aspectRatio parameter for Video media container is now optional, introduced modifier parameter for more niche use-cases.

Toggle

• Bug Fix Hovered border rendered incorrectly in some cases.

net.ikea.skapa:design:3.3.0

Dual button, Tag

• Bug Fix InteractionSource for Dual button was handled incorrectly for Focused and Pressed states.

List view item

• Improvement Minor interaction improvements.

Price

• Improvement Line-wrapping improvement for subscript label.

Price module

• Improvement Dual currencies now use the same PriceSize for both primary and secondary prices.

Search

• Experimental Feature New experimental Search function is available. This variant supports a new extended (full screen) mode and a standard standalone mode.

• Bug Fix The new function which uses TextFieldValue does not include the built in top-padding that the old function does. This should make alignment easier in your views.

• Bug Fix Solves a bug where upscaled font and display could cause the content to shift off center vertically.

• Experimental Feature 3 new sizes: small, medium, and large. This aligns with the Skapas figma designs for Search.

Select/Dropdown

• Bug Fix Keyboard navigation requires two key presses to open the dropdown menu or when navigating with tab key.

Simple Video

• Experimental Change AspectRatio parameter is now optional and can be set as null if the user requires a custom aspect ratio solution.

net.ikea.skapa:design:3.2.0

• Updated dependencies

Badge

• New Feature Added Extended color palette colours and Sustainability colour to BadgeColor enum class.

Carousel

• A11y Added hover navigation buttons to navigate between items.

Choice

• Experimental Feature Added custom leading and trailing image slots which accept a @Composable function. This is to be used with your own Image implementation that requires further business logic than just supplying a painter.

ListView Item

• Experimental Feature Added custom leading image slots which accept a @Composable function. This is to be used with your own Image implementation that requires further business logic than just supplying a painter.

Pill

• Experimental Feature Added custom leading image option which accept a @Composable function. This is to be used with your own Image implementation that requires further business logic than just supplying a painter.

Price, Price module

• Experimental Feature Added prefixLabel to component. This can be used to add a "From" label to the price. This is only supported for PriceVariant.Regular aka Standard price.

• Improvement Line-breaking of Price is now handled better for larger fonts and longer price values.

Tabs

• A11y Added hover navigation buttons to navigate between scrollable tab items.

TextOverlayCard

• Experimental Feature Added custom image option which accept a @Composable function. This is to be used with your own Image implementation that requires further business logic than just supplying a painter.

net.ikea.skapa:design:3.1.0

• Updated dependencies

Choice

• Improvement Added leading and trailing Image sizes. Small, medium, and large. Small is the default.

ListView Item

• Improvement Added leading ImageView sizes. Small, medium, and large. Small is the default.

Quantity stepper

• Breaking change Removed a redundant function. The component function kept just has additional params with default values.

Price

• A11y Accessibility improvement for Talkback on Price. Integer value gets cleaned from white-space, commas and dots.

Search

• Bug fix UI improvement for longer placeholder texts.

Toggle

• A11y Accessibility improvement for Talkback.

net.ikea.skapa:design:3.0.0

• Updated dependencies

Accordion

• Breaking Change Added support for content padding by splitting horizontalPadding into contentHorizontalPadding and headerHorizontalPadding. The old functions are now deprecated with level=DeprecationLevel.ERROR.

Aspect Ratio Box

• Breaking Change Reordered and combined parameters with proper default values. Now there is only one constructor that handles all cases.

Button

• Deprecated ButtonVariant.PrimaryInverse, ButtonVariant.Tertiary and ButtonVariant.SecondaryInverse have been deprecated with level=DeprecationLevel.ERROR. Use ButtonVariant.Primary.Inverse, ButtonVariant.Secondary.Inverse and ButtonVariant.Tertiary.Inverse instead.

Card

• Breaking Change Removed fullScreenParams and onBackgroundPress parameters from the Video MediaContainer.

• Breaking Change CardV2Variant has been deprecated with level=DeprecationLevel.ERROR and replaced with CardVariant. Use replaceWith() function to migrate.

• Breaking Change CardV2TitleSize has been deprecated with level=DeprecationLevel.ERROR and replaced with CardTitleSize. Use replaceWith() function to migrate.

• Deprecated The old card constructors have been deprecated with level=DeprecationLevel.ERROR. Use the new constructors with Cardinstead.

• Improvement Exposed onBackgroundClick parameter for MediaContainer.Video to allow handling of background clicks. This should be used to toggle play/pause state of the SimpleVideo component. The change is due to a refactor in SimpleVideo where it no longer manages the playing state internally.

• Improvement Updated CardTheme.Sustainability to use a new color scheme.

• Experimental Feature Forced VideoButtonAlignment.AllTopTrailing button alignment for Video MediaContainer.

• Experimental Feature Video is no longer play or pausable by clicking the video area. Only the exclusive button can be used to play/pause the video.

• Bug Fix Fixed issue where arrow icon would not resolve correctly when using RTL layout direction.

Carousel

• Deprecated CarouselVariant.OverflowWithoutIndicator has been deprecated with level=DeprecationLevel.ERROR. Use the showIndicator boolean property in CarouselVariant.Overflow instead.

Checkbox / Tristate Checkbox

• Breaking Change Old constructor with error: Boolean = false and helperText: String? = null parameters is now deprecated. Use the constructor with simultaneous caption and helperTextErrorLabel instead.

• Breaking Change label parameter is now of type String and AnnotatedString. CharSequence is now deprecated and will be removed.

• New Feature CheckboxGroupItem now allows for caption and helperTextErrorLabel parameters to be set.

Compact Card

• Breaking Change Removed fullScreenParams and onBackgroundPress parameters from the Video MediaContainer.

• Improvement Exposed onBackgroundClick parameter for MediaContainer.Video to allow handling of background clicks. This should be used to toggle play/pause state of the SimpleVideo component. The change is due to a refactor in SimpleVideo where it no longer manages the playing state internally.

• Improvement Updated CardTheme.Sustainability to use a new color scheme.

• Experimental Feature Forced VideoButtonAlignment.AllTopTrailing button alignment for Video MediaContainer.

• Experimental Feature Video is no longer play or pausable by clicking the video area. Only the exclusive button can be used to play/pause the video.

• Bug Fix Fixed issue where arrow icon would not resolve correctly when using RTL layout direction.

Divider

• Deprecated Divider constructor without orientation has been deprecated with level=DeprecationLevel.ERROR. Use the Divider constructor with orientation instead.

Dropdown / Select / Input Field

• Improvement An empty label parameter will now not take up any space above the component. However, it is still recommended to always provide a label for accessibility reasons.

Dual Button

• Deprecated DualButtonOrientation has been deprecated with level=DeprecationLevel.ERROR. Use Orientation class instead.

Icon Button

• Deprecated IconButtonVariant.PrimaryInverse, IconButtonVariant.Tertiary and IconButtonVariant.SecondaryInverse have been deprecated with level=DeprecationLevel.ERROR. Use IconButtonVariant.Primary.Inverse, IconButtonVariant.Secondary.Inverse and IconButtonVariant.Tertiary.Inverse instead.

Input Field

• Deprecated The older InputField constructors have been deprecated with level=DeprecationLevel.ERROR. Use the new updated constructors instead.

• Bug Fix Fixed issue where the character counter would not update correctly when pasting text.

• Experimental Feature Added public InputField function which takes value: TextFieldValue and onValueChange: (TextFieldValue) -> Unit as parameters. This allows for more complex text input handling, such as selection, composition, etc.

ModalHeader

• Deprecated ModalHeaderParams has been deprecated with level=DeprecationLevel.ERROR. Use ModalHeader instead.

Pill

• Breaking Change Constructor with no defaults for badgeValue and trailingIconId has been removed completely. This was due to conflicting with the new constructor that has defaults and each is optional.

• Breaking Change New constructor has re-ordered parameters.

• Deprecated Other old pill constructors have been deprecated with level=DeprecationLevel.ERROR. Only one public constructor is available now, which has new parameters as optional and with defaults.

• Bug Fix Fixed issue where longer texts could be clipped.

Price

• Breaking Change Function API has been restructured. modifier param has been moved.

• Breaking Change PriceSizeStyle.SingleSize has been renamed to PriceSizeStyle.FixedSize for consistency.

• Breaking Change PriceSizeStyle parameter moved to be inside of PriceVariant for supported variants. PriceVariant.BTI is now a class instead of a data object hence the requirement to change from PriceVariant.BTI to PriceVariant.BTI(...).

• Breaking Change Regular and Comparison variants has been updated to use PriceVariantStyle.Emphasised and PriceVariantStyle.Subtle instead of boolean parameters for bold and subtle.

• New Feature Added PriceVariant.TimeRestrictedOffer to accommodate the new design for time restricted offers.

Price Module

• Breaking Change PriceParams has been restructured. Order of captionPrefix and captionSuffix properties been moved. captionPrefix is no longer optional and must be provided.

• Breaking Change OfferMessage now has Default as default variant. Uses black color for text except for IKEA Family which uses blue color. Now, all other variants are open and can be combined with all priceOfferType.

• Breaking Change Deprecated function using mergeDescendants and replaced it with mergeDescendantsStrategy.

• Improvement PriceOfferType.TimeRestrictedOffer and PriceOfferType.NewTimeRestrictedOffer now uses Red colour for Price. Applies to both Price and PriceModule.

• New feature Added support for EDS message (Last chance to buy) with a new param edsMessage. Placed below offerMessage.

Radio Button

• Breaking Change label parameter is now of type String and AnnotatedString. CharSequence is now deprecated and will be removed.

Search

• Improvement Improved handling of start/end insets.

Segmented Control

• Breaking Change Size names updated. Text items now use XSmall, Small, Medium instead Small, Medium, Large. Use SegmentedControlSize.Text enum class instead. Old enum values have been deprecated with level=DeprecationLevel.ERROR.

• Breaking Change Size names updated. Icon items now use Small, Medium instead Medium, Large. Use SegmentedControlSize.Icon enum class instead. Old enum values have been deprecated with level=DeprecationLevel.ERROR.

• Improvement Updated component heights to match new design.

Sheet

• Breaking Change Sheet built on top of Material 2 has been deprecated with level=DeprecationLevel.ERROR. Please migrate to the new Sheet which is built on top of Material 3.

• Breaking Change More refactoring of the Sheet internals to even more align to the underlying ModalBottomSheet from Material3 component. Eg. background, shape, drag handle. Exposing properties etc.

Simple Video

• Breaking Change Refactored how isPlaying state is handled. The SimpleVideo component no longer manages the playing state internally. Instead, it relies on the isPlaying parameter passed from the VideoPlayerButtonParams.PlayButtonParams class.

• Breaking Change onBackgroundPress has been replaced with onBackgroundClick to align with our standard naming convention. The default has also been changed to null, so any play / pause behaviour will need to be handled by the user.

• Breaking Change VideoButtonAlignment.TopCardOnly has been renamed to VideoButtonAlignment.AllTopTrailing.

Tabs

• Breaking Change Removed shadowColor parameter. The end of the tabs will no longer fade out.

• Breaking Change Replaced fluid: Boolean = false parameter with behaviour: TabsBehaviour. This will make it more explicit how the tabs should behave. TabsBehaviour.Scrollable(contentPadding: PaddingValues) includes the ability to add content edge padding to the scrollable tabs variant.

• Improvement Replaced edgePadding: Dp (added in 3.0.0-alpha02) with behaviour parameter which takes the type TabsBehaviour.Scrollable(contentPadding: PaddingValues). This change allow the tabs to properly fill the screen in edge-to-edge layouts.

Text Area

• Deprecated Constructor with enabled boolean has been deprecated with level=DeprecationLevel.ERROR. Use constructor with enabledState: EnabledState instead.

• Improvement An empty label parameter will now not take up any space above the component. However, it is still recommended to always provide a label for accessibility reasons.

• Bug Fix Fixed issue where the character counter would not update correctly when pasting text.

• Experimental Feature Added public TextArea function which takes value: TextFieldValue and onValueChange: (TextFieldValue) -> Unit as parameters. This allows for more complex text input handling, such as selection, composition, etc.

TextOverlay Card

• Bug Fix Fixed issue where arrow icon would not resolve correctly when using RTL layout direction.

• Experimental Feature Added new TextOverlayMediaContainer.Video which supports video as media with predefined visual parameters.