Button pill

Button pill allows users to toggle an element to their favourites.

React

unsupported

Vue

unsupported

Elements

unsupported

Android

unsupported

iOS

released

Example

Example theme:

DBA lightFinn lightTori lightBlocket lightDBA darkFinn darkTori darkBlocket dark

Usage

Design Guidelines

See Figma: Warp - Components / Button pill

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #smp-warp-design-system

Frameworks

Syntax

Warp.ButtonPill(
    type: ButtonPillType,
    selected: Binding<Bool>
)

Warp.ButtonPill(
    type: .overlay,
    selected: $isSelected
)

Visual options

There are a variety of variants supported for the ButtonPill component:

enum Warp.ButtonPillType {
    /// A pill with an overlay appearance.
    case overlay
    /// A pill with a flat appearance.
    case flat
}

Legacy support

By default all Warp components return a SwiftUI View but there is always a UIKit UIView available to use also.

Warp.ButtonPill(
    type: .overlay,
    selected: $isSelected
).uiView

Parameters

Required props

name	type	default	notes
type	Warp.ButtonPillType		The type of the button (flat or overlay).
selected	Binding Bool		A binding to the selected state of the button.