Primitive
CTA Button
Auto-emitted from DSKintsugiCatalog.ctabutton. Tier atom.
Live Preview
Dark
.ds-cta-primary
Action principale — sigma red bg + gold halo on hover
.ds-cta-secondary
Companion to primary — gold halo on hover (dark surface)
Light (in nav scope)
.ds-cta-primary
Action principale — red stays red on light
.ds-cta-secondary
Navy halo on hover (gold-on-cream poor contrast)
Native · macOS
DSL usage
// Source of truth — Swift, SwiftUI-like (KatagamiCore)
struct CTAButton: ShikkiView {
let label: String
let role: Role
let action: ActionKey
let isDisabled: Bool
func body(context: RenderContext) -> ViewNode {
ViewNode.button(
label: .text(label, style: .body),
action: action,
style: ButtonStyle(variant: role.buttonVariant)
)
}
}
// Renderers consume the SAME tree :
// • KatagamiSwiftUI → native SwiftUI Button
// • KatagamiWeb → <a class="ds-cta-primary">Demander une démo</a>
// • KatagamiTypst → rounded box + ink color
//
// The storybook entry's previewHTML is COMPUTED, not hand-rolled :
// CTAButton(label: "Démo", role: .primary, action: .submit).emittedHTML
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
role |
CTAButton.Role | — |
Semantic role: .primary | .secondary | .secondaryRed |
label |
String | — |
Button label text |
action |
ActionKey | — |
Action key consumed by KatagamiSwiftUI; href on web |
isDisabled |
Bool | false |
Adds is-disabled / aria-disabled / SwiftUI .disabled(true) |
Used in
sigma-analytics obyw-one shikki.io (W4 follow-up)