Pill Component

A pill contains information which is in regard of a status of another component in the screen. A pill is not clickable.

Usage 🔑

Import the necessary components: Ensure you've imported the required Pill Composable and other necessary components at the top of your Kotlin file.

import androidx.compose.runtime.* import androidx.compose.ui.* // ... other required imports

Use the OCPill Composable: In your UI, you can then add the OCPill composable: @Composable fun yourComposable() { // ... start

OCPill( modifier = Modifier, pillColor = OCPillColor, title= "Your Text", iconLeading = Leading icon resource id, iconTrailing = Leading icon resource id, style = OCTheme.typography.caption1SemiBold.copy(letterSpacing = LocalDimensions.current.pointOneFiveSpTextSize, fontWeight = FontWeight.Bold), )

// ... rest of code } Parameters:

title: String: The label to be displayed on the pill. If the text exceed a particular width it gets truncated. This text is subjected to accessibility feature for screen readers. pillColor: OCPillColor: Specifies the color of the Pill. Based on that will decide the background color and text color of that pill component. By default take Green Pill. modifier: Modifier: Modifier for styling and layout. iconLeading: Int? = null: A Leading icon which is optional. Resizing of icon is disabled and is a hidden from screen reader. iconTrailing: Int? = null: A Trailing icon which is optional. Resizing of icon is disabled and is a hidden from screen reader. style: TextStyle : Style of the text, which can be used for combined configurations. colors: OCPillColors? = null: User can apply custom background and text color for pill rather than specifying the [pillColor].