Buttons

Displays a button with an action to be triggered when clicked or touched.

Primary Button

{{ui_kit_demo?id=primarybutton}}

import androidx.compose.runtime.Composable
import com.composables.uikit.components.PrimaryButton
import com.composables.uikit.components.Text

@Composable
fun PrimaryButtonExample() {
    PrimaryButton(onClick = { /* TODO */ }) {
        Text("Save changes")
    }
}

Secondary Button

{{ui_kit_demo?id=secondarybutton}}

import androidx.compose.runtime.Composable
import com.composables.uikit.components.PrimaryButton
import com.composables.uikit.components.SecondaryButton
import com.composables.uikit.components.Text

@Composable
fun SecondaryButtonExample() {
    SecondaryButton(onClick = { /* TODO */ }) {
        Text("Save changes")
    }
}

Outlined Button

{{ui_kit_demo?id=outlinedbutton}}

import androidx.compose.runtime.Composable
import com.composables.uikit.components.OutlinedButton
import com.composables.uikit.components.Text

@Composable
fun OutlinedButtonExample() {
    OutlinedButton(onClick = { /* TODO */ }) {
        Text("Outlined Button")
    }
}

Ghost Button

{{ui_kit_demo?id=ghostbutton}}

import androidx.compose.runtime.Composable
import com.composables.uikit.components.GhostButton
import com.composables.uikit.components.Text

@Composable
fun GhostButtonExample() {
    GhostButton(onClick = { /* TODO */ }) {
        Text("Ghost Button")
    }
}

Destructive Button

{{ui_kit_demo?id=destructivebutton}}

import androidx.compose.runtime.Composable
import com.composables.uikit.components.DestructiveButton
import com.composables.uikit.components.Text

@Composable
fun DestructiveButtonExample() {
    DestructiveButton(onClick = { /* TODO */ }) {
        Text("Delete")
    }
}

Icon Button

{{ui_kit_demo?id=iconbutton}}

import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.composables.icons.lucide.Lucide
import com.composables.icons.lucide.Pencil
import com.composables.uikit.components.Icon
import com.composables.uikit.components.IconButton

@Composable
fun IconButtonExample() {
    IconButton(onClick = { /* TODO */ }) {
        Icon(Lucide.Pencil, contentDescription = "Compose", modifier = Modifier.size(16.dp))
    }
}