Design/net.ikea.skapa.ui.components

Package-level declarations

Skapa Components available for Android.

Types

enum AccordionSize : Enum<AccordionSize>

AccordionSize defines the minimum height of the Accordion. The height of the container will expand if the text size is increased. Use medium and large size to add an extra caption in the accordion.

AccordionTextStyle

enum AccordionTextStyle : Enum<AccordionTextStyle>

AccordionTextStyle defines the style variant of the Accordion. It indicates whether the title is regular or bold.

AvatarSize

enum AvatarSize : Enum<AvatarSize>

AvatarSize Enum class which represents the sizing of the Avatar component.

AvatarStyle

enum AvatarStyle : Enum<AvatarStyle>

AvatarStyle Enum class which represents the color scheme of the Avatar component.

AvatarVariant

sealed class AvatarVariant

Sealed class that represents the different display types in AvatarVariant as well as the necessary properties for each type.

BadgeColor

enum BadgeColor : Enum<BadgeColor>

Colors for Badge

BadgeSize

enum BadgeSize : Enum<BadgeSize>

Sizes for Badge is the only one supporting BadgeSize.Small

BadgeVariant

sealed class BadgeVariant

Variants for Badge

BaseField

object BaseField

ButtonSize

enum ButtonSize : Enum<ButtonSize>

Pre-defined sizes for Button component

ButtonVariant

sealed class ButtonVariant

Pre-defined styles for the Button component

CardAddon

sealed class CardAddon

The add-on container on top of the title supports Icon, CommercialMessage and Badge. Please note that only one add-on can be made visible.

CardButtonVariant

enum CardButtonVariant : Enum<CardButtonVariant>

CardCommercialMessageType

enum CardCommercialMessageType : Enum<CardCommercialMessageType>

Types for CommercialMessage

CardFooterContent

sealed class CardFooterContent

The footer content of the Card

CardTextSize

enum CardTextSize : Enum<CardTextSize>

CardTheme

enum CardTheme : Enum<CardTheme>

The Card supports different themes for communication, approved by IKEA Brand team.

CardV2Variant

enum CardV2Variant : Enum<CardV2Variant>

Styled variants for Card

CarouselDismissParams

data class CarouselDismissParams(val onDismissClicked: () -> Unit, val dismissButtonContentDescription: String? = null)

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

CarouselItemSpacing

enum CarouselItemSpacing : Enum<CarouselItemSpacing>

Used to adjust the space between items, using a predetermined set of Space tokens

CarouselVariant

sealed class CarouselVariant

CarouselVariant enum class which defines the variant of the Carousel component.

CharacterCounterParams

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, var checked: Boolean = false, val enabled: Boolean = true)

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.

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.

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.

CompactCardCommercialMessageType

enum CompactCardCommercialMessageType : Enum<CompactCardCommercialMessageType>

Types for CommercialMessage

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.

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.

DualButtonOrientation

enum ~~DualButtonOrientation~~ : Enum<DualButtonOrientation>

Orientation to use with Dual button Use DualButtonOrientation.Horizontal to have the buttons side-by-side. Use DualButtonOrientation.Vertical to stack the buttons vertically.

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>

Position for Dual button First is the Start Orientation.Horizontal or Top Orientation.Vertical Second is the End Orientation.Horizontal or Bottom Orientation.Vertical

DualButtonSize

enum DualButtonSize : Enum<DualButtonSize>

DualButtonSize Small or Medium. Default is Medium.

DualButtonVariant

enum DualButtonVariant : Enum<DualButtonVariant>

Use DualButtonVariant.Primary to stand out on top of images or other graphics such as interactive maps. Uses Static colors. Use DualButtonVariant.Secondary for low emphasis. Adapts to Light/Dark Themes. Use DualButtonVariant.SecondaryInverse Use secondary inverse dual buttons for low emphasis on dark backgrounds. Uses static colors.

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.

ExpanderVariant

enum ExpanderVariant : Enum<ExpanderVariant>

Variants for Expander

FailReason

enum FailReason : Enum<FailReason>

Fail reason for Shoppable image products

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

HyperlinkColor

enum HyperlinkColor : Enum<HyperlinkColor>

Pre-defined colours for Hyperlink component

IconButtonSize

enum IconButtonSize : Enum<IconButtonSize>

Pre-defined sizes for IconButton

IconButtonVariant

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

ImageParams

data class ImageParams(val painter: Painter, val contentDescription: String?, val aspectRatio: SkapaAspectRatio = SkapaAspectRatio.Ratio16by9)

Data class to be used for header images in Card component.

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.

InlineMessageVariant

enum InlineMessageVariant : Enum<InlineMessageVariant>

Pre-defined Inline message variants.

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

ListViewItemControls

sealed class ListViewItemControls

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

ListViewItemImage

sealed class ListViewItemImage

Leading content: Text, Icon, Image, Payment Logo 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

MenuItemImage

sealed class MenuItemImage

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

ModalFooterButtonAlignment

enum ModalFooterButtonAlignment : Enum<ModalFooterButtonAlignment>

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

ModalHeader

sealed class ModalHeader

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

ModalHeaderParams

data class ModalHeaderParams(val variant: ModalsHeaderVariant, val title: String? = null, val trailingAction: ModalHeaderAction? = null, val leadingAction: ModalHeaderAction? = null)

Class that represents the necessary data to build a ModalHeader

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>

NavButtonParams

data class NavButtonParams(val forwardButtonContentDescription: String, val backButtonContentDescription: String)

Data class that represents the necessary data to add navigation buttons in the 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, var 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

PillSize

enum PillSize : Enum<PillSize>

Sizes for Pill component

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>

SegmentedControlIconItemSize

enum SegmentedControlIconItemSize : Enum<SegmentedControlIconItemSize>

The size of the segmented control items using icons.

SegmentedControlItem

sealed class SegmentedControlItem<T>

The items that can be displayed in a segmented control.

SegmentedControlStyle

enum SegmentedControlStyle : Enum<SegmentedControlStyle>

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

SegmentedControlTextItemSize

enum SegmentedControlTextItemSize : Enum<SegmentedControlTextItemSize>

The size of the segmented control items using text labels. Note: The Small variant is not allowed with the SegmentedControlItem.Icon, it will default to Medium sizing.

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 In most cases, emphasised styles are preferred, as it’s important to highlight user selections. Subtle styles are useful in contexts where the coloured selection competes in the hierarchy of nearby elements, like other emphasised elements, or coloured content within the Choice Button content.

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

SheetState

class SheetState(initialValue: SheetValue, animationSpec: AnimationSpec<Float> = SwipeableDefaults.AnimationSpec, val confirmStateChange: (SheetValue) -> Boolean = { true }) : SwipeableState<SheetValue>

State of the SheetState composable.

SheetValue

enum SheetValue : Enum<SheetValue>

Possible values of SheetState.

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

SkapaImage

object SkapaImage

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