Skip to content
Larasby Kotek

Component

Button

The canonical pill: GO, NEXT, START PRACTICE. Primary for the one action that moves you forward, secondary for the rest, and Liquid Glass for controls that float over content.

PillButton · PrimaryButton in Kotek/Core/UI/Components.swift

Preview

Primary · The one action that moves the player on.
Secondary · A dark slab with gold type, for the other actions.
Glass · For controls floating over content: bars, overlays, the camera. A web approximation; on iOS this is the system material.
Compact glass · Drawn 38pt tall, with a 44pt target.

Specs

Height
56pt (compact 38pt, target 44pt)
Corner radius
14pt
Horizontal padding
30pt (compact 18pt)
Label
SF Pro 19pt Black, uppercase, 1.5pt tracking (compact 14pt)
Icon gap
8pt
Primary
Tertiary #FBD494 slab, LaunchBackground label
Secondary
ButtonSecondary #1C1612 slab, TitleText label
Glass
glassEffect(.regular.interactive(), in: RoundedRectangle(cornerRadius: 14)); untinted; TitleText label; no border
Feedback
Kajar tick on press; silent for buttons that record or play audio

Guidance

  1. Glass is for the functional layer

    Liquid Glass is a layer for controls and navigation that floats above the content. Apple: “Don't use Liquid Glass in the content layer.” In Kotek that means bottom bars, the pause overlay and controls over the camera or the waterfall. A button inside a settings card or a list is content, and stays a solid Secondary.

    HIG · Materials ↗

  2. Use it sparingly

    Apple: “Limit these effects to the most important functional elements in your app.” A bar with two glass buttons is fine; a screen of them distracts from the instrument they're meant to frame.

    HIG · Materials ↗

  3. Regular, not clear

    Regular glass blurs and adjusts what's behind it to keep labels legible, and it's what most system components use. Clear is for controls over photos and video, and needs a 35% dark dimming layer when the content is bright. Kotek's controls sit on the brown ground or the camera, so they use regular.

    HIG · Materials ↗

  4. Color only for the primary action

    Glass has no color of its own; it takes it from what's behind. Apple asks to apply color sparingly, reserve it for primary actions, put it on the background rather than the label, and “refrain from adding color to the background of multiple controls.” Gold labels suit Kotek's monochrome brown, which is the case Apple names for using a brand color as the accent.

    HIG · Color ↗

  5. Build it with the system

    Use the system material, not a lookalike: .buttonStyle(.glass) for a standard button, or glassEffect(.regular.interactive(), in:) for a custom one, which gives it the same press response. Put several glass controls in one GlassEffectContainer so they render together and can morph into each other. The system then handles Reduce Transparency and Increase Contrast.

    Applying Liquid Glass to custom views ↗

Usage

Do

  • Use one or two prominent buttons per view, for the step that moves the player on.
  • Use glass only for controls that float over content.
  • Keep labels to one or two short words.

Don't

  • Put a glass button inside a card or list. That's the content layer; use Secondary.
  • Tint the glass. Color on glass is for the one primary action, and that is the filled button.
  • Let a label wrap. It is clipped instead, as a signal to shorten it.