KleriButton
Primary action button with built-in success state, animated feedback, and disabled state.
Usage
<KleriButton
showSuccess={false}
successMessage="Success!"
successTimeout={2000}
disabled={false}
>
Click me
</KleriButton>Props
Show Success
false
Disabled
false
KleriUtilityButton
Utility button with built-in tooltip support and hover effects.
Usage
<KleriUtilityButton
tooltip="Click to perform action"
>
Utility
</KleriUtilityButton>Props
KleriButtonGroup
Groups related buttons together with merged borders, radius stripping, and shared size / variant context. Includes optional Separator and Text subcomponents.
Usage
<KleriButtonGroup
orientation="horizontal"
size="sm"
variant="default"
items={[
{{
type: "button",
label: "Save",
icon: {Save},
tooltip: "Save file"
}},
{{
type: "button",
label: "Copy",
icon: {Copy},
tooltip: "Copy file"
}},
{{
type: "button",
label: "Delete",
icon: {Delete},
tooltip: "Delete file"
}}
]}
/>Props
Show Separator
false
Show Text Prefix
false
KleriMagicButton
Button with an animated radial gradient border that follows the cursor and an inner glow effect.
Usage
<KleriMagicButton
gradientSize={150}
gradientColor="rgb(132, 204, 184)"
gradientOpacity={0.25}
gradientFrom="rgb(132, 204, 184)"
gradientTo="rgb(25, 96, 114)"
>
Magic Button
</KleriMagicButton>