Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.prism.byescaleira.com/llms.txt

Use this file to discover all available pages before exploring further.

Every component in PrismUI reads the active theme from the SwiftUI environment, respects Dynamic Type, and meets Apple HIG minimum tap-target sizes. You don’t pass colors or fonts as arguments — you configure variants and behaviors, and the design system handles the rest. The sections below cover all six component categories with representative code examples for each.
Primitives are the atomic building blocks: buttons, inputs, cards, avatars, and status indicators.

​
PrismButton

PrismButton supports six visual variants, async actions with a built-in loading state, haptic feedback, and automatic disable handling.
public enum PrismButtonVariant {
    case filled
    case tinted
    case bordered
    case plain
    case glass
    case glassProminent
}

PrismButton("Sign In", variant: .filled) {
    await viewModel.signIn()
}
The action closure is async, so you can await any asynchronous call directly. PrismButton shows a ProgressView while the action runs and re-enables itself when it completes.

​
PrismTextField

PrismTextField validates input on focus-loss and shows inline error messages. Five built-in validation rules are available, plus a .custom escape hatch.
// Required field
PrismTextField("Username", text: $username,
    validation: .required("Username is required"))

// Email pattern
PrismTextField("Email", text: $email,
    validation: .pattern(
        "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}",
        "Enter a valid email address"
    ))

// Custom validator
PrismTextField("Password", text: $password,
    validation: .custom { value in
        value.count < 8 ? "At least 8 characters required" : nil
    })
Available validation cases: .required, .minLength, .maxLength, .pattern, .custom.

​
PrismCard

PrismCard is a themed container with configurable surface color, corner radius, and elevation.
PrismCard(surface: .surface, radius: .lg, elevation: .low) {
    VStack(alignment: .leading, spacing: SpacingToken.sm.rawValue) {
        Text("Account Overview")
            .prismFont(.headline)
        Text("$4,218.00")
            .prismFont(.largeTitle)
            .prismColor(.brand)
    }
}

​
PrismAvatar

PrismAvatar supports images, remote URLs with async loading, and initials fallback. An optional status indicator shows presence state.
// Initials with status
PrismAvatar(initials: "JD", size: .large, status: .online)

// Remote image
PrismAvatar(url: user.avatarURL, size: .medium, status: .away)
Available sizes: .small (32 pt), .medium (40 pt), .large (56 pt), .xLarge (80 pt), .custom(CGFloat).Available status cases: .online, .offline, .busy, .away.

​
PrismTag

PrismTag renders a small pill label for statuses, categories, and labels. An optional SF Symbol icon appears before the text.
PrismTag("Active", style: .success, icon: "checkmark.circle")
PrismTag("Pending", style: .warning)
PrismTag("Error", style: .error)
PrismTag("Beta", style: .brand)
Available styles: .default, .success, .warning, .error, .info, .brand.

​
PrismProgressBar

PrismProgressBar renders determinate or indeterminate progress. The indeterminate shimmer automatically stops when the user enables Reduce Motion.
// Determinate
PrismProgressBar(value: 0.65, label: "Upload progress")

// Indeterminate
PrismProgressBar(label: "Loading…")

​
PrismLoadingState

PrismLoadingState standardizes how you represent loading, empty, and error states across your app.
PrismLoadingState(.loading)

PrismLoadingState(.empty(
    title: "No results",
    message: "Try adjusting your search",
    icon: "magnifyingglass"
))

PrismLoadingState(.error("Something went wrong", retry: {
    viewModel.reload()
}))

​
PrismSkeletonView

PrismSkeletonView shows a shimmer placeholder for content that is loading. Four pre-built layouts are available, plus a custom size.
PrismSkeletonView(.card)
PrismSkeletonView(.list(rows: 4))
PrismSkeletonView(.avatar)
PrismSkeletonView(.custom(width: 200, height: 20, radius: .sm))

​
Other primitives

ComponentDescription
PrismChipSelectable tag with dismiss button
PrismIconSF Symbol with token-driven size and color
PrismAsyncImageAsync image with shimmer loading state and error fallback
PrismTableData table with sortable columns
PrismTimelineViewVertical timeline with step indicators
PrismGaugeCircular gauge with arc-shaped progress
PrismButtonGroupHorizontal group of segmented buttons
PrismExpandableCardCard with animated expand/collapse content