# Refining Compose API for design systems

DevFeed: [Refining Compose API for design systems](<https://devfeed.tech/articles/refining-compose-api-for-design-systems-22602.md>)

Original publisher: [Read original article](<https://medium.com/bumble-tech/refining-compose-api-for-design-systems-d652e2c2eac3?source=rss----6353b5325b1a---4>)

Author: Yury

Published: 2024-02-21T11:10:51Z

Content type: article

Language: en

Sources: [Bumble Tech](<https://devfeed.tech/sources/bumble-tech.md>)

Topics: [Design system](<https://devfeed.tech/topics/design-system.md>), [Jetpack Compose](<https://devfeed.tech/topics/jetpack-compose.md>), [User Interfaces](<https://devfeed.tech/topics/user-interfaces.md>), [API](<https://devfeed.tech/topics/api.md>), [Material Design](<https://devfeed.tech/topics/material-design.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [api](<https://devfeed.tech/tags/api.md>), [compose](<https://devfeed.tech/tags/compose.md>), [design-systems](<https://devfeed.tech/tags/design-systems.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [material-design](<https://devfeed.tech/tags/material-design.md>), [user-interfaces](<https://devfeed.tech/tags/user-interfaces.md>)

## AI overview

This article explains how to design custom Jetpack Compose components for internal design systems. It compares restrictive APIs, which enforce predefined usage but limit extensibility, with relaxed Slot APIs that accept lambda-generated content and support more flexible component variants.

## Source excerpt

Jetpack Compose both makes it easier and promotes usage of an internal design system by creating custom Compose components. But how should we build these components? In this article, we will take a look at possible implementations of a design component, explore their API verbosity and extensibility, and how we can find a balance between these characteristics to make Compose components both easy to use, enforce design system guidelines and extendable on demand. Let's get started! Design System and Compose A design system is a comprehensive set of guidelines, components, and rules that help to build cohesive and consistent user interfaces. The most common design system for Android developers is Material Design 3 which is available for Compose too. Custom design systems might be built on top of existing systems like Material Design or can be created from scratch. Compose provides all the tools that are required for this process. Design System NavigationBar Let's take a look at NavigationBar. A usual NavigationBar that we can see almost in every app. The design system in this case defines the following properties: Margin between the component borders and the content. Margin between the left/middle/right content. Preferred style of the left/right icons. Text style of the title. Restrictive API Compose implementation of NavigationBar is pretty straightforward. @Composable fun NavigationBar( title: String, modifier: Modifier = Modifier, leftButton: IconButton? = null, rightButton: IconButton? = null, ) { Row(modifier) { ... } } @Immutable data class IconButton( val icon: Painter, val onClick: () -> Unit, ) An API that allows only particular use of NavigationBar is a restrictive API. Such API ensures that developers will be able to use the component only in the predefined way, leaving no space for possible mistakes and inconsistency. Great at first sight, but has a major restriction -- missing extensibility. As soon as we continue making our apps bigger, we will eventually f