SusHoldButton

Press-and-hold control — completes only after HoldDurationMs with progress feedback.

Package

SusKit · Atoms (commercial)

SusKit · Atoms

Props

Name	Type	Default
`Text`	`Prop<string>`	`"Hold"`
`Icon`	`Prop<string>`	`""`
`Variant`	`Prop<string>`	`"elevated"`
`Color`	`Prop<string>`	`"primary"`
`Size`	`Prop<string>`	`"default"`
`Disabled`	`Prop<bool>`	`false`
`Block`	`Prop<bool>`	`false`
`HoldDurationMs`	`Prop<int>`	`1000`
`DelayMs`	`Prop<int>`	`0`
`ProgressMode`	`Prop<string>`	`"strip"`
`CancelRewindMs`	`Prop<int>`	`180`
`CompletedHoldMs`	`Prop<int>`	`600`
`AutoResetCompleted`	`Prop<bool>`	`true`
`IsHolding`	`Prop<bool>`	`false`
`Progress`	`Prop<float>`	`0f`
`Phase`	`Prop<string>`	`"idle"`

Slots

No slots.

Events

Name	Field	Payload
`Click`	`OnClick`	—
`HoldComplete`	`OnHoldComplete`	—
`HoldCancel`	`OnHoldCancel`	—
`HoldProgress`	`OnHoldProgress`	`float`

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

keyboard-focus
sus-hold-button
sus-hold-button__content
sus-hold-button__fill
sus-hold-button__icon
sus-hold-button__label
sus-hold-button__ring
sus-hold-button__track
sus-hold-button--block
sus-hold-button--color-danger
sus-hold-button--color-info
sus-hold-button--color-primary
sus-hold-button--color-secondary
sus-hold-button--color-success
sus-hold-button--color-warning
sus-hold-button--content-sized
sus-hold-button--disabled
sus-hold-button--elevated
sus-hold-button--flat
sus-hold-button--holding
sus-hold-button--icon-only
sus-hold-button--mode-fill
sus-hold-button--mode-ring
sus-hold-button--mode-strip
sus-hold-button--outlined
sus-hold-button--phase-armed
sus-hold-button--phase-cancelled
sus-hold-button--phase-completed
sus-hold-button--phase-holding
sus-hold-button--phase-idle
sus-hold-button--size-default
sus-hold-button--size-lg
sus-hold-button--size-sm
sus-hold-button--text
sus-hold-button--tonal

Usage

xml

<template>
  <sus:SusHoldButton Text="Confirm delete"
                     Color="danger"
                     Variant="elevated"
                     HoldDurationMs="1200"
                     ProgressMode="strip"
                     @hold-complete="OnConfirmed" />
</template>

<script>
void OnConfirmed() { /* … */ }
</script>

csharp

var hold = new SusHoldButton();
hold.Text.Value = "Hold to sell";
hold.HoldDurationMs.Value = 1000;
hold.ProgressMode.Value = "strip";
hold.OnHoldComplete += () => { /* … */ };
hold.OnHoldCancel += () => { /* … */ };

Notes

ProgressMode: strip · ring.
OnClick fires on a normal click; hold success is OnHoldComplete.

SusHoldButton ​