data class CharacterCounterParams(@IntRange(from = 0, to = 9223372036854775807) val characterLimit: Int, val accessibilityCharacterLimitMessage: String?)

Character limit counter values.

CheckboxGroupItem

data class CheckboxGroupItem<T>(val key: T, val label: String, val checked: Boolean = false, val enabled: Boolean = true, val caption: String? = null, val helperTextErrorLabel: String? = null)

Data class used for CheckboxGroup

CheckboxVariant

enum CheckboxVariant : Enum<CheckboxVariant>

Appearance of the Checkbox

ChoiceContent

data class ChoiceContent(val title: String? = null, val caption: String? = null, val addon: @Composable () -> Unit? = null, val expandingText: String? = null)

Content interface for Choice.

ChoiceContentAlignment

enum ChoiceContentAlignment : Enum<ChoiceContentAlignment>

Content alignment options for leading and trailing content for Choice component.

ChoiceGroupItem

data class ChoiceGroupItem<T>(val key: T, val content: ChoiceContent, val leadingContent: ChoiceLeadingContent = ChoiceLeadingContent.None, val trailingContent: ChoiceTrailingContent = ChoiceTrailingContent.None, val enabled: Boolean = true)

Data class used for Choice group items.

ChoiceImageSize

enum ChoiceImageSize : Enum<ChoiceImageSize>

Image sizes for leading and trailing image content for Choice component.

ChoiceLeadingContent

sealed class ChoiceLeadingContent

Leading content for Choice: Icon, Payment Logo, or Image

ChoiceSize

enum ChoiceSize : Enum<ChoiceSize>

Sizes for Choice. The sizes affect the minimum height of the component. Keep in mind that the small variant should ideally be used without a caption or larger add-ons. If the content is larger than the container, it will grow accordingly.

ChoiceTrailingContent

sealed class ChoiceTrailingContent

Trailing content for Choice: Icon, Image, Text, or Price.

CommercialMessageSize

enum CommercialMessageSize : Enum<CommercialMessageSize>

Sizes for Commercial message in combination with Price module.

CommercialMessageType

enum CommercialMessageType : Enum<CommercialMessageType>

Types for CommercialMessage

CommercialMessageVariant

enum CommercialMessageVariant : Enum<CommercialMessageVariant>

Variants for CommercialMessage

CompactCardAddon

sealed class CompactCardAddon

The add-on container in the media container supports CommercialMessage and Badge. Please note that only one add-on can be made visible.

CompactCardTheme

enum CompactCardTheme : Enum<CompactCardTheme>

Regular Compact Card is available in two themes: Default and Inverse. Default theme is used on white/black (neutral-1) backgrounds, while the Inverse theme is used on top of coloured and neutral surfaces.

CompactCardVariant

enum CompactCardVariant : Enum<CompactCardVariant>

Regular Compact Card with a content container background surface that provides a stronger visual contrast and creates a more contained expression. Simple Compact Card with a content container lacking background surface colour and padding.

CompactMediaContainer

sealed class CompactMediaContainer

Provides required choice between Image and Video content.

CurrencyPosition

enum CurrencyPosition : Enum<CurrencyPosition>

Placement of currency symbol/label. This can change depending on the market.

CurrencySpacing

enum CurrencySpacing : Enum<CurrencySpacing>

Space added between the currency and price digits. Appended before or after the currency depending on CurrencyPosition.

DecimalSign

enum DecimalSign : Enum<DecimalSign>

Separator for integers and decimals

DismissParams

data class DismissParams(val onDismissRequest: () -> Unit, val dismissButtonContentDescription: String? = null)

Data class that represent the necessary data to add an close DismissParams in a component.

DualButtonParams

data class DualButtonParams(@DrawableRes val iconResource: Int, val contentDescription: String, val enabled: Boolean = true, val interactionSource: MutableInteractionSource? = null)

Data class for DualButton content.

DualButtonPosition

enum DualButtonPosition : Enum<DualButtonPosition>

DualButtonPosition represents the position of the button in the layout. Use this enum to determine which button is which.

DualButtonSize

enum DualButtonSize : Enum<DualButtonSize>

DualButtonSize represents the height and width of the individual buttons.

DualButtonVariant

enum DualButtonVariant : Enum<DualButtonVariant>

The variant of the DualButton. The variant determines the color scheme of the button.

EnabledState

enum EnabledState : Enum<EnabledState>

States primarily used for Input field and Text areas, but also other components that need both Enabled, Disabled and ReadOnly. The state is used to block input and change the UI when used with ReadOnly and Disabled. Default state is Enabled.

ExpanderVariant

enum ExpanderVariant : Enum<ExpanderVariant>

Variants for Expander

FooterButtonAlignment

enum FooterButtonAlignment : Enum<FooterButtonAlignment>

Enum class used for Prompt footer alignment when two buttons are used.

FooterButtonVariant

enum FooterButtonVariant : Enum<FooterButtonVariant>

Represents choice between Primary and Secondary button variant for CardFooterContent.

HelperTextParams

data class HelperTextParams(val state: HelperTextState, val label: String? = null)

Helper class for Helper text parameters

HelperTextProps

object HelperTextProps

HelperTextState

enum HelperTextState : Enum<HelperTextState>

Helper text states. There are 4 variants that emphasise the state trying to be conveyed.

HyperlinkColor

enum HyperlinkColor : Enum<HyperlinkColor>

Pre-defined colours for Hyperlink component.

IconButtonSize

@Stable

enum IconButtonSize : Enum<IconButtonSize>

Pre-defined sizes for IconButton There are 3 sizes available: Medium, Small and XSmall. The default size is Medium.

IconButtonVariant

@Immutable

sealed class IconButtonVariant

Pre-defined styles for the IconButton component

IconParams

data class IconParams(val position: IconPosition.Horizontal, @DrawableRes val iconId: Int?, val contentDescription: String?, val onClick: () -> Unit? = null)

Icon parameters for clickable icons used in eg. Input field related components.

IconPillSize

enum IconPillSize : Enum<IconPillSize>

Pre-defined sizes for IconPill There are 2 sizes available: Medium and Small

InlineMessageActionParams

data class InlineMessageActionParams(val label: String, val onClick: () -> Unit)

InlineMessageActions

data class InlineMessageActions(val first: InlineMessageActionParams, val second: InlineMessageActionParams? = null)

InlineMessageStyle

enum InlineMessageStyle : Enum<InlineMessageStyle>

Pre-defined accentuation for Inline message styling. Chose between Emphasised which has a title and drop shadow or Subtle which is flat.

InlineMessageVariant

enum InlineMessageVariant : Enum<InlineMessageVariant>

Pre-defined Inline message variants. There are 4 variants available: Informative, Positive, Cautionary and Negative. Each variant has a different semantic meaning.

InlineMessageVisibility

enum InlineMessageVisibility : Enum<InlineMessageVisibility>

Enum class to handle InlineMessage visibility state, changing the state will trigger AnimatedVisibility effect on the component.

JumboButtonVariant

enum JumboButtonVariant : Enum<JumboButtonVariant>

Variants for Jumbo buttons

ListBoxItemHeader

interface ListBoxItemHeader

Interface used to determine if item in list is header

ListBoxItemsParams

data class ListBoxItemsParams<T : ListBoxItemHeader>(val items: List<T>, val itemContent: @Composable (T) -> Unit, val contentPadding: PaddingValues = MenuDefaults.DropdownMenuItemContentPadding, val onItemClick: (T) -> Unit?)

Data class that represents a list of items that Implement ListBoxItemHeader interface and is used to separate the items by headers

ListBoxProps

object ListBoxProps

ListViewImageSize

enum ListViewImageSize : Enum<ListViewImageSize>

Image sizes for leading image content for ListViewItem component.

ListViewItemControls

sealed class ListViewItemControls

Trailing controls are used to distinguish between Navigation and Action behaviour.

ListViewItemImage

sealed class ListViewItemImage

Leading content: Text, Icon, Image, PaymentLogo or Avatar All list view item sizes supports leading content. Please note that Leading image and Medium Payment logos are only supported in Medium and Large list view items. Small list view items also supports a small version of the payment logo container.

ListViewItemSize

enum ListViewItemSize : Enum<ListViewItemSize>

ListViewItemSize defines the minimum height of the List View Item container. All list view item variants are available in three different sizes. The height of the container will expand if the text size is increased. Use medium and large list view items for images and double lines of text.

ListViewItemTextStyle

enum ListViewItemTextStyle : Enum<ListViewItemTextStyle>

Controls the title text style of the ListViewItem component.

LoadingBallSize

enum LoadingBallSize : Enum<LoadingBallSize>

Sizes for LoadingBall component

LoadingBallVariant

enum LoadingBallVariant : Enum<LoadingBallVariant>

Color variants for LoadingBall component

MediaContainer

sealed class MediaContainer

Represents the content of the Card.

MemberCardActionParams

data class MemberCardActionParams(val actionIcon: ActionIcon, val contentDescription: String, val clickableItems: MemberCardClickableItems = MemberCardClickableItems.Icon, val onClick: () -> Unit)

Data class for handling the action available in MemberCard.

MemberCardClickableItems

enum MemberCardClickableItems : Enum<MemberCardClickableItems>

MemberCardClickableItems defines which part of the card is clickable by the user. Default value is MemberCardClickableItems.Icon.

MemberCardCodeType

enum MemberCardCodeType : Enum<MemberCardCodeType>

MemberCardCodeType defines which type of code system is to be used and sizes the code container accordingly.

MemberCardOrientation

enum MemberCardOrientation : Enum<MemberCardOrientation>

MemberCardOrientation sets the desired orientation variant of the component.

MemberCardProgram

enum MemberCardProgram : Enum<MemberCardProgram>

MemberCardProgram defines the visual style, or program to be applied to the IKEA Member Card.

MemberCardStyleParams

data class MemberCardStyleParams(val program: MemberCardProgram = MemberCardProgram.Family, val orientation: MemberCardOrientation = MemberCardOrientation.Horizontal, val codeType: MemberCardCodeType = MemberCardCodeType.QR)

Data class for the styling of the MemberCard.

MenuItemImage

sealed class MenuItemImage

Leading content: Only Icon for now All menu item sizes supports leading content.

MergeDescendantsStrategy

enum MergeDescendantsStrategy : Enum<MergeDescendantsStrategy>

Strategy for merging descendants of the PriceModule. This is used to control how the PriceModule is merged into a single node for accessibility purposes.

ModalFooterButtonAlignment

enum ModalFooterButtonAlignment : Enum<ModalFooterButtonAlignment>

Enum class used for Modals footer alignment when two buttons are used.

ModalHeader

sealed class ModalHeader

The different types of headers and data used for a ModalsHeaderVariant.

ModalHeaderAction

data class ModalHeaderAction(@DrawableRes val iconResource: Int, val contentDescription: String? = null, val action: () -> Unit)

A ModalHeaderAction is represented as an IconButton added to the header component

ModalsActionFooterParams

data class ModalsActionFooterParams(val buttonAlignment: ModalFooterButtonAlignment = ModalFooterButtonAlignment.SideBySide, val primaryButton: @Composable () -> Unit, val secondaryButton: @Composable () -> Unit?)

Class that represents the necessary data to build a ModalsActionFooter

ModalsHeaderVariant

enum ModalsHeaderVariant : Enum<ModalsHeaderVariant>

Header variants as enums to simplify mapping between ´variants´ of modal headers and the the actual ´content´ of the headers. Used together with Sheet ViewModel.

NavButtonParams

data class NavButtonParams(val forwardButtonContentDescription: String, val backButtonContentDescription: String, val variant: NavButtonVariant = NavButtonVariant.Primary)

Data class that represents the necessary data to add navigation buttons in the component.

NavButtonVariant

enum NavButtonVariant : Enum<NavButtonVariant>

Button variant for the navigation buttons in the carousel.

OfferMessageItem

data class OfferMessageItem(val label: String, val variant: OfferMessageVariant = OfferMessageVariant.Default, val showBullet: Boolean = true)

Offer message to highlight an offer for the product.

OfferMessageVariant

enum OfferMessageVariant : Enum<OfferMessageVariant>

Variants for Offer message to use different colors.

PaymentLogoParams

data class PaymentLogoParams(val painter: Painter, val contentDescription: String?)

Payment Logo parameters for trailing payment logo used in Input field component.

PaymentLogoSize

enum PaymentLogoSize : Enum<PaymentLogoSize>

PaymentLogoSize defines the overall size of the Payment Logo container.

PillGroupItem

data class PillGroupItem(val key: Any?, val label: String, val selected: Boolean = false)

Data class used for PillGroup

PillGroupState

enum PillGroupState : Enum<PillGroupState>

State of the PillGroup component. It determines if the group is either PillGroupState.Expanded or PillGroupState.Collapsed

PillLeadingItem

sealed class PillLeadingItem

LeadingItem for Pill component

PillSize

enum PillSize : Enum<PillSize>

Sizes for Pill component

PriceModule

object PriceModule

PriceModuleSizeList

enum PriceModuleSizeList : Enum<PriceModuleSizeList>

Set of sizes for PriceModule component in the PriceModuleVariant.List variant.

PriceModuleSizeRegular

enum PriceModuleSizeRegular : Enum<PriceModuleSizeRegular>

Set of sizes for PriceModule component in the PriceModuleVariant.Regular variant.

PriceModuleVariant

sealed class PriceModuleVariant

PriceOfferType

sealed class PriceOfferType

Represents the Price offer type for the product.

PriceParams

data class PriceParams(val integerValue: String, val decimalValue: String? = null, val currencyLabel: String, val decimalSign: DecimalSign = DecimalSign.Comma, val captionPrefix: String?, val captionSuffix: String? = null, val currencyPosition: CurrencyPosition = CurrencyPosition.Leading, val subscriptLabel: String? = null, val decimalVerticalAlignment: AffixVerticalAlignment = AffixVerticalAlignment.Top, val currencyVerticalAlignment: AffixVerticalAlignment = AffixVerticalAlignment.Top, val currencySpacing: CurrencySpacing = CurrencySpacing.None)

Price params used to match Price

PriceSize

enum PriceSize : Enum<PriceSize>

The price size is a simplified version of the Price scaling.

PriceSizeStyle

enum PriceSizeStyle : Enum<PriceSizeStyle>

There are two options for the price size styling: FixedSize and MixedSize.

PriceVariant

sealed class PriceVariant

Pre-defined styles for the Button component. There are three styles available: Regular, Comparison, BTI and TimeRestrictedOffer. Each style has its own unique characteristics.

PriceVariantStyle

enum PriceVariantStyle : Enum<PriceVariantStyle>

Style variant for PriceVariant.Regular and PriceVariant.Comparison.

ProductIdentifierVariant

enum ProductIdentifierVariant : Enum<ProductIdentifierVariant>

Styles for ProductIdentifier

PromptAction

data class PromptAction(val label: String, val action: () -> Unit)

Data class used for Prompt primaryAction & secondaryAction

QuantityStepperActions

@Stable

class QuantityStepperActions(val onDecrease: (Int) -> Unit? = null, val onIncrease: (Int) -> Unit? = null, val onInputValueChange: (Int) -> Unit? = null)

The QuantityStepperActions class actions that will be triggered in response to users triggering an input action on the QuantityStepper component. This can be used together with the default onValueChange param.

QuantityStepperSize

enum QuantityStepperSize : Enum<QuantityStepperSize>

QuantityStepperSize defines the overall size of the Quantity Stepper component.

RadioButtonVariant

enum RadioButtonVariant : Enum<RadioButtonVariant>

Styles for RadioButton

RadioGroupItem

data class RadioGroupItem<T>(val key: T, val label: String, val enabled: Boolean = true, val caption: String? = null)

Data class used for RadioButtonGroup

RatingSize

enum RatingSize : Enum<RatingSize>

Rating size enum class.

SearchActionItem

data class SearchActionItem(@DrawableRes val iconResource: Int, val contentDescription: String, val onClick: () -> Unit)

Search component trailing action items which are rendered as icon buttons. Use a max of 2 action items.

SecondCurrencyPriceParams

data class SecondCurrencyPriceParams(val priceParams: PriceParams, val comparisonPriceParams: PriceParams? = null)

Second currency price for Dual currencies. This option is provide due some legal requirements in some markets.

SegmentedControlItem

sealed class SegmentedControlItem<T>

The items that can be displayed in a segmented control. There are two types of items: Text and Icon. You can either do all text or all icons in a segmented control, but not a mix of both.

SegmentedControlSize

class SegmentedControlSize

The 2 size variants for the Segmented Control items. Text items have 3 sizes and Icon items have 2 sizes.

SegmentedControlStyle

enum SegmentedControlStyle : Enum<SegmentedControlStyle>

The visual styling of the Segmented Control. Allow users to switch between two visualisation modes without changing content.

SelectInteractionParams

data class SelectInteractionParams(val onClick: (Boolean) -> Unit, val onClickContentDescription: String?, val enabled: Boolean = true)

Select interaction params

SelectionEmphasis

enum SelectionEmphasis : Enum<SelectionEmphasis>

Style for Choice Two different selection styles allow fine grained control of visual hierarchy: Emphasised and Subtle.

SelectItemsParams

data class SelectItemsParams<T>(val items: List<T>, val itemContent: @Composable (T) -> Unit, val onItemSelected: (T) -> Unit, val onDismissRequest: () -> Unit, val itemContentPadding: PaddingValues = MenuDefaults.DropdownMenuItemContentPadding, val fluidMenu: Boolean = false, val selectedItem: T? = null)

Class that controls the aspects related with the Select items

ShopAllButtonParams

data class ShopAllButtonParams(val label: String, val visible: Boolean = true, val onClick: () -> Unit)

Params for Shop all button. Uses a ButtonVariant.ImageOverlay when rendered.

ShoppableImageBackgroundParams

data class ShoppableImageBackgroundParams(val painter: Painter, val contentDescription: String?, val aspectRatio: SkapaAspectRatio = SkapaAspectRatio.Ratio3by4, val onClick: () -> Unit)

Data class to be used for the background image used together with ShoppableImage.

ShoppableImageItem

data class ShoppableImageItem<T>(val key: T, @FloatRange(from = 0.0, to = 1.0) val xCoordinate: Float, @FloatRange(from = 0.0, to = 1.0) val yCoordinate: Float, val content: @Composable () -> Unit, val contentDescription: String? = null, val onClick: () -> Unit? = null)

Shoppable image item data class. This is is used together with the ShoppableImage component to display products or other information on top of an image.

SkapaAspectRatio

enum SkapaAspectRatio : Enum<SkapaAspectRatio>

Set of aspect ratios defined by Skapa.

SkapaIconsProductRange

enum SkapaIconsProductRange : Enum<SkapaIconsProductRange>

SkapaImage

object SkapaImage

This Object provides the necessary properties to build an Skapa Image component

Example of usage

StatusPosition

enum StatusPosition : Enum<StatusPosition>

Position of the status dot when if used with label

StatusSize

enum StatusSize : Enum<StatusSize>

Sizes for Status component

StatusSymbol

enum StatusSymbol : Enum<StatusSymbol>

Symbols for Status component

StatusVariant

enum StatusVariant : Enum<StatusVariant>

Styles for Status component

SwitchVariant

enum SwitchVariant : Enum<SwitchVariant>

Appearance of the Switch

TabItem

sealed class TabItem

Tab item can have two Implementations Text only and Text and Icon.

TabsBehaviour

sealed class TabsBehaviour

TabsBehaviour is used to define the behaviour of the tabs.

TabVariant

enum TabVariant : Enum<TabVariant>

TabVariant is used to define the style of the tabs.

TagColor

enum TagColor : Enum<TagColor>

Colors for Tag component.

TextOverlayAddon

sealed class TextOverlayAddon

Represents the type of commercial message that can be displayed on the Text Overlay Card.

TextOverlayMediaContainer

sealed class TextOverlayMediaContainer

Represents the media container for the Text Overlay Card. Currently, it supports only Image, but soon it will be a Video option as well.

TextOverlayTitleSize

enum TextOverlayTitleSize : Enum<TextOverlayTitleSize>

Represents the size of the title text in the Text Overlay Card. It can be either Regular or Small.

TitleSize

enum TitleSize : Enum<TitleSize>

Different sizes for title for different sizes of CompactCard.

ToggleItem

sealed class ToggleItem

Data class for Toggle content. There are two types of content: ToggleItem.Text and ToggleItem.Icon.

VideoButtonAlignment

enum VideoButtonAlignment : Enum<VideoButtonAlignment>

VideoButtonAlignment represents the alignment of the buttons in the video player. It is used to determine where the buttons should be placed in relation to the video player.

VideoPlayerButtonParams

sealed class VideoPlayerButtonParams

VideoPlayerButtonParams represents the parameters for the buttons in the video player. It is a sealed class that contains different data classes for each button type.

Package-level declarations

Types

Example of usage

Functions

Example of usage