Button

A pill-shaped button that triggers an action, with variants for every level of emphasis.

Button is an open-source component from suiss/ui for React, React Native, SwiftUI and Jetpack Compose. The @esuiss/ui CLI copies its source into your project, so you own the code.

Button renders a native button by default. It supports eight visual variants, five text sizes and five icon-only sizes, and an optional block mode that fills the container width.

Use the default variant for the primary action in a view, secondary, tinted or outline for supporting actions, ghost and plain for low-emphasis actions, and destructive for actions that delete or remove. To join several buttons into one control, use Button Group.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/button

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add button

Manual

Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react class-variance-authority

Copy the source into components/ui/button.tsx:

Update the import paths to match your project.

Usage

import { Button }

<Button

Mark icons with data-icon="inline-start" or data-icon="inline-end" to tighten the padding on that side. Icons without a size class are sized automatically.

Use an icon size, such as icon or icon-sm, for buttons that contain only an icon, and give them an aria-label.

To render a link or a router component with button styling, use the render prop from Base UI. buttonVariants is also exported if you need the classes on another element.

To render a link or a router component with button styling, set asChild and pass it as the child. buttonVariants is also exported if you need the classes on another element.

Button always renders a button. To give a link or a router component button styling, apply the classes from buttonVariants to it.

Examples

Variants

Shows all eight variants side by side.

Sizes

Compares the xs, sm, default and lg sizes.

With icon

Adds leading and trailing icons, and an icon-only button.

Disabled

A disabled button that is skipped in the tab order.

Block

Full-width buttons at each size, whose corner radius scales with size.

API Reference

Button

The interactive button element.

Prop	Type	Default	Description
`variant`	`"default" \| "outline" \| "secondary" \| "tinted" \| "ghost" \| "plain" \| "destructive" \| "link"`	`"default"`	Visual style: `default`, `outline`, `secondary`, `tinted`, `ghost`, `plain`, `destructive` or `link`.
`size`	`"default" \| "xs" \| "sm" \| "lg" \| "xl" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| "icon-xl"`	`"default"`	Height and padding. `xs` to `xl` for text buttons; `icon-xs` to `icon-xl` for square icon-only buttons.
`block`	`true`	-	When `true`, the button fills the container width and uses rounded corners instead of a pill shape.

Also accepts the props of the primitive part it wraps.

Accessibility

Renders a native button, so Enter and Space activate it.
A disabled button is removed from the tab order.
Icon-only buttons need an aria-label.
Keyboard focus shows a 3px ring in --ring; the destructive variant tints it with ring-destructive/20.
aria-invalid adds a destructive border and ring, and aria-expanded shows a selected background on outline, ghost and plain buttons that open menus or popovers.

Notes

Styling hook: data-slot="button".
Colors come from the primary, secondary, accent and destructive variables. Hover uses the same color with an opacity, such as hover:bg-primary/80, and disabled buttons use opacity-50.
Buttons in a group raise the focused one above its neighbors so the whole ring stays visible.

Button is a Pressable with the button role. It supports eight visual variants, five text sizes and five icon-only sizes, and an optional block mode that fills the width of its container.

Use the default variant for the primary action on a screen, secondary, tinted or outline for supporting actions, ghost and plain for low-emphasis actions, and destructive for actions that delete or remove. To join several buttons into one control, use Button Group.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/button

See Installation for the components.json setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add button

$ pnpm dlx @esuiss/ui@latest add button --platform swift

import SwiftUI import UIKit struct RGBA: Sendable { let red: CGFloat let green: CGFloat let blue: CGFloat let alpha: CGFloat init(_ hex: UInt32, _ alpha: CGFloat = 1) { red = CGFloat((hex >> 16) & 0xFF) / 255 green = CGFloat((hex >> 8) & 0xFF) / 255 blue = CGFloat(hex & 0xFF) / 255 self.alpha = alpha }

import SwiftUI public enum EsuissColor { public static let background = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000)) public static let foreground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7)) public static let card = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F)) public static let cardForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7)) public static let popover = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F)) public static let popoverForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7)) public static let primary = Color.adaptive(light: .init(0x0071E3), dark: .init(0x2997FF)) public static let primaryForeground = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0xFFFFFF)) public static let secondary = Color.adaptive(light: .init(0x000000, 0.04), dark: .init(0xFFFFFF, 0.1)) public static let secondaryForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7)) public static let muted = Color.adaptive(light: .init(0xF5F5F7), dark: .init(0x161617)) public static let mutedForeground = Color.adaptive(light: .init(0x6E6E73), dark: .init(0xA1A1A6)) public static let accent = Color.adaptive(light: .init(0x000000, 0.06), dark: .init(0xFFFFFF, 0.1))

import SwiftUI public struct VariantButtonStyle: ButtonStyle { public enum Variant: CaseIterable, Sendable { case `default`, outline, secondary, tinted, ghost, plain, destructive, link } public enum Size: CaseIterable, Sendable { case `default`, xs, sm, lg, xl, icon, iconXs, iconSm, iconLg, iconXl var height: CGFloat { switch self { case .xs, .iconXs: 24 case .sm, .iconSm: 32 case .default, .icon: 36 case .lg, .iconLg: 44

import SwiftUI extension EnvironmentValues { @Entry var buttonGroup: Axis? = nil @Entry var buttonGroupSize: CGSize = .zero } enum ButtonGroupSpace: Hashable { case group } struct ButtonGroupFrame { let bounds: Anchor<CGRect> let outlined: Bool }

import SwiftUI public enum TextVariant: CaseIterable, Sendable { case `default`, h1, h2, h3, h4, p, blockquote, code, lead, large, small, muted var style: TextStyle { switch self { case .h1: .xl3 case .h2: .xl2 case .h3: .xl case .h4, .lead, .large: .lg case .code, .small, .muted: .sm default: .base } }

package com.esuiss.ui.theme import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.Immutable import androidx.compose.runtime.staticCompositionLocalOf import androidx.compose.ui.Modifier import androidx.compose.ui.draw.dropShadow import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shape import androidx.compose.ui.graphics.shadow.Shadow as DropShadow import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.style.LineHeightStyle import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.DpOffset

package com.esuiss.ui.theme import androidx.compose.runtime.Immutable import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp @Immutable data class Colors( val background: Color, val foreground: Color, val card: Color, val cardForeground: Color, val popover: Color, val popoverForeground: Color, val primary: Color, val primaryForeground: Color,

package com.esuiss.ui.components import androidx.compose.runtime.compositionLocalOf import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.TextStyle import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp val LocalContentStyle = compositionLocalOf { TextStyle.Default } val LocalContentColor = compositionLocalOf { Color.Unspecified } val LocalIconSize = compositionLocalOf { 20.dp }

package com.esuiss.ui.components import androidx.compose.foundation.Image import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.graphics.takeOrElse import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.unit.Dp import com.esuiss.ui.theme.EsuissTheme @Composable fun Icon( imageVector: ImageVector,

import { PlusIcon } from "phosphor-react-native" import { View } from "react-native" import { Button } from "@/components/ui/button" import { Icon } from "@/components/ui/icon" import { Text } from "@/components/ui/text" export function ButtonVariantsExample() { return ( <View className="gap-3"> <Button> <Text>Default</Text> </Button> <Button variant="secondary"> <Text>Secondary</Text> </Button> <Button variant="tinted"> <Text>Tinted</Text> </Button> <Button variant="outline"> <Text>Outline</Text> </Button> <Button variant="ghost"> <Text>Ghost</Text> </Button> <Button variant="plain"> <Text>Plain</Text> </Button> <Button variant="destructive"> <Text>Destructive</Text> </Button> <Button variant="link"> <Text>Link</Text> </Button> <Button size="icon" variant="outline"> <Icon as={PlusIcon} /> </Button> </View> ) }

import { PlusIcon } from "phosphor-react-native" import { View } from "react-native" import { Button } from "@/components/ui/button" import { Icon } from "@/components/ui/icon" import { Text } from "@/components/ui/text" export function ButtonSizesExample() { return ( <View className="gap-3"> <View className="flex-row flex-wrap items-center gap-3"> <Button size="xs"> <Text>Extra small</Text> </Button> <Button size="sm"> <Text>Small</Text> </Button> <Button> <Text>Default</Text> </Button> <Button size="lg"> <Text>Large</Text> </Button> <Button size="xl"> <Text>Extra large</Text> </Button> </View> <View className="flex-row flex-wrap items-center gap-3"> <Button size="icon-xs" variant="secondary"> <Icon as={PlusIcon} /> </Button> <Button size="icon-sm" variant="secondary"> <Icon as={PlusIcon} /> </Button> <Button size="icon" variant="secondary"> <Icon as={PlusIcon} /> </Button> <Button size="icon-lg" variant="secondary"> <Icon as={PlusIcon} /> </Button> <Button size="icon-xl" variant="secondary"> <Icon as={PlusIcon} /> </Button> </View> </View> ) }

import { ArrowRightIcon, DownloadSimpleIcon, TrashIcon } from "phosphor-react-native" import { View } from "react-native" import { Button } from "@/components/ui/button" import { Icon } from "@/components/ui/icon" import { Text } from "@/components/ui/text" export function ButtonWithIconExample() { return ( <View className="items-start gap-3"> <Button> <Icon as={DownloadSimpleIcon} /> <Text>Download</Text> </Button> <Button variant="outline"> <Text>Continue</Text> <Icon as={ArrowRightIcon} /> </Button> <Button variant="destructive"> <Icon as={TrashIcon} /> <Text>Delete</Text> </Button> </View> ) }