2a:I[33468,["/_next/static/immutable/chunks/3zkf6hue1re1x.js","/_next/static/immutable/chunks/1q5l_9jc8vl5f.js","/_next/static/immutable/chunks/1-lx9znl_5v1a.js","/_next/static/immutable/chunks/0mydcqcrgr988.js","/_next/static/immutable/chunks/2mn9rq5zewzz5.js"],"Image"] 2b:I[68279,["/_next/static/immutable/chunks/3zkf6hue1re1x.js","/_next/static/immutable/chunks/1q5l_9jc8vl5f.js","/_next/static/immutable/chunks/1-lx9znl_5v1a.js","/_next/static/immutable/chunks/0mydcqcrgr988.js","/_next/static/immutable/chunks/2mn9rq5zewzz5.js"],"ComponentWorkbench"] 2c:T147d,import * as React from "react" const blueCtaTones = ["blue", "violet", "emerald", "rose"] as const type BlueCtaTone = (typeof blueCtaTones)[number] const blueCtaPlatforms = ["macos", "windows"] as const type BlueCtaPlatform = (typeof blueCtaPlatforms)[number] type BlueCtaButtonProps = React.ComponentProps<"button"> & { icon?: React.ReactNode tone?: BlueCtaTone platform?: BlueCtaPlatform } type BlueCtaToneStyle = React.CSSProperties & { "--starck-blue-cta-start": string "--starck-blue-cta-middle": string "--starck-blue-cta-end": string "--starck-blue-cta-dark": string "--starck-blue-cta-glow": string } const blueCtaToneStyles = { blue: { "--starck-blue-cta-start": "#0b75e5", "--starck-blue-cta-middle": "#0a73e4", "--starck-blue-cta-end": "#0972e4", "--starck-blue-cta-dark": "0 40 120", "--starck-blue-cta-glow": "10 118 240", }, violet: { "--starck-blue-cta-start": "#8257f5", "--starck-blue-cta-middle": "#7447eb", "--starck-blue-cta-end": "#693cdd", "--starck-blue-cta-dark": "58 24 140", "--starck-blue-cta-glow": "124 58 237", }, emerald: { "--starck-blue-cta-start": "#10a978", "--starck-blue-cta-middle": "#07966a", "--starck-blue-cta-end": "#05855e", "--starck-blue-cta-dark": "0 82 58", "--starck-blue-cta-glow": "5 150 105", }, rose: { "--starck-blue-cta-start": "#f14f70", "--starck-blue-cta-middle": "#e73f61", "--starck-blue-cta-end": "#d93254", "--starck-blue-cta-dark": "130 20 52", "--starck-blue-cta-glow": "244 63 94", }, } satisfies Record const blueCtaBaseClassName = "starck-blue-cta inline-flex cursor-pointer items-center justify-center gap-1.5 px-5 py-2 text-sm font-medium tracking-[-0.022em] whitespace-nowrap text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--starck-blue-cta-glow)/0.6)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" // The capsule is an Apple shape: macOS has drawn fully-rounded buttons since // Big Sur, so it reads as native there. Windows 11 has no such shape - Fluent // buttons are rounded rectangles - and a pill next to a Windows logo looks like // a Mac button in costume. 10px reads as Fluent at CTA scale without going // sharp next to soft cards. const blueCtaPlatformClassNames = { macos: "rounded-full", windows: "rounded-[10px]", } satisfies Record // The macOS capsule, for consumers that compose their own button (navbar, // sticky bars) and never switch platform. const blueCtaClassName = `${blueCtaBaseClassName} ${blueCtaPlatformClassNames.macos}` const blueCtaStyle = { fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif', } satisfies React.CSSProperties function AppleMark({ className }: { className?: string }) { return ( ) } // The Windows 11 mark: four equal panes, no perspective. It stays legible at // 15px, where the tilted Windows 8/10 logo turns to mush. function WindowsMark({ className }: { className?: string }) { return ( ) } function PlatformMark({ platform, className, }: { platform: BlueCtaPlatform className?: string }) { return platform === "windows" ? ( ) : ( ) } function BlueCtaButton({ children = "Get SessionWatcher", className, icon, platform = "macos", style, tone = "blue", type = "button", ...props }: BlueCtaButtonProps) { return ( ) } export { AppleMark, BlueCtaButton, blueCtaBaseClassName, blueCtaClassName, blueCtaPlatformClassNames, blueCtaPlatforms, blueCtaStyle, blueCtaTones, PlatformMark, WindowsMark, } export type { BlueCtaButtonProps, BlueCtaPlatform, BlueCtaTone } 21:["$","main",null,{"className":"mx-auto max-w-5xl px-5 py-12 sm:px-8 sm:py-16","children":[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Blue CTA Button\",\"description\":\"SessionWatcher's dimensional CTA: sampled color tones, specular rim, soft glow, a quick press state, and a macOS or Windows platform mode.\",\"url\":\"https://ui.starck.studio/components/blue-cta-button\",\"codeRepository\":\"https://github.com/Soren-Starck/starck-ui\",\"programmingLanguage\":[\"TypeScript\",\"React\"],\"runtimePlatform\":\"React\",\"license\":\"https://opensource.org/licenses/MIT\",\"author\":{\"@type\":\"Person\",\"name\":\"Soren Starck\",\"url\":\"https://starck.studio\"},\"isPartOf\":{\"@type\":\"WebSite\",\"name\":\"STARCK UI\",\"url\":\"https://ui.starck.studio\"}}"}}],["$","div",null,{"children":[["$","h1",null,{"className":"text-4xl font-semibold tracking-[-0.035em]","children":"Blue CTA Button"}],["$","p",null,{"className":"mt-4 max-w-2xl text-base leading-7 text-muted-foreground","children":"SessionWatcher's dimensional CTA: sampled color tones, specular rim, soft glow, a quick press state, and a macOS or Windows platform mode."}],null,null,null,["$","div",null,{"className":"mt-5 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm","children":[["$","span",null,{"className":"text-muted-foreground","children":"Used in"}],[["$","span","https://sessionwatcher.com?ref=ui.starck.studio",{"className":"inline-flex items-center gap-2","children":[null,["$","a",null,{"href":"https://sessionwatcher.com?ref=ui.starck.studio","target":"_blank","rel":"noreferrer","className":"inline-flex items-center gap-1.5 font-medium underline-offset-4 hover:underline","children":[["$","$L2a",null,{"src":"/products/sessionwatcher.png","alt":"","width":16,"height":16,"className":"size-4 rounded-[4px]"}],["$","span",null,{"children":["SessionWatcher"," ↗"]}]]}]]}],["$","span","https://moorline.app?ref=ui.starck.studio",{"className":"inline-flex items-center gap-2","children":[["$","span",null,{"aria-hidden":"true","className":"text-border","children":"·"}],["$","a",null,{"href":"https://moorline.app?ref=ui.starck.studio","target":"_blank","rel":"noreferrer","className":"inline-flex items-center gap-1.5 font-medium underline-offset-4 hover:underline","children":[["$","$L2a",null,{"src":"/products/moorline.png","alt":"","width":16,"height":16,"className":"size-4 rounded-[4px]"}],["$","span",null,{"children":["Moorline"," ↗"]}]]}]]}]]]}]]}],["$","$L2b",null,{"slug":"blue-cta-button","title":"Blue CTA Button","description":"SessionWatcher's dimensional CTA: sampled color tones, specular rim, soft glow, a quick press state, and a macOS or Windows platform mode.","defaultUsage":"\n Get SessionWatcher\n","sources":[{"path":"registry/default/blue-cta-button.tsx","content":"$2c"}]}]]}]

Blue CTA Button

Install

Usage