LobeChatLobeHub
UI
Components
Chat
Mobile
Awesome
Brand
Mdx
Color
Changelog
Ctrl K
Data Display
Features
Hero
SpotlightCard
Effect
AuroraBackground
GaussianBackground
GridBackground
Spotlight
Feedback
Giscus
General
GradientButton

GradientButton

The GradientButton component is a customized button component built on top of Ant Design's Button component. It allows for customization of the button appearance with a gradient background and a glow effect. It also includes an optional spin animation.

import { GradientButton } from '@lobehub/ui/awesome';
NPM
UNPKG
BundlePhobia
PackagePhobia
Anvaka Graph
Source
Edit
Previous
Giscus

Resources

Lobe UI-AIGC Components
Lobe Icon-AI / LLM Icon Collection
Lobe Charts-Modern Charts
Lobe TTS-TTS / STT Library

Community

Report Bug
Request Feature

Help

GitHub
Changelog

More Products

🤯 Lobe Chat-AI / LLM Chat Framework
🧸 Lobe Vidol-Virtual Idols for EveryOne
🅰️ Lobe Theme-Stable Diffusion Extension
🌐 Lobe i18n-AI i18next CLI
Copyright © 2022-2025
Made with 🤯 by LobeHub
LobeHub

Default

APIs

NameDescriptionTypeDefault
glow--boolean--
href--string--
htmlType--"button"|"submit"|"reset"--
autoInsertSpace--boolean--
type--"text"|"primary"|"link"|"default"|"dashed"--
color--"primary"|"danger"|"default"|"blue"|"purple"|"cyan"|"green"|"magenta"|"pink"|"red"|"orange"|"yellow"|"volcano"|"geekblue"|"lime"|"gold"--
variant--"text"|"link"|"dashed"|"outlined"|"solid"|"filled"--
icon--ReactNode--
iconPosition--"start"|"end"--
shape--"default"|"circle"|"round"--
size--"small"|"middle"|"large"--
disabled--boolean--
loading--boolean|{delay?:number;icon?:ReactNode}--
prefixCls--string--
className--string--
rootClassName--string--
ghost--boolean--
danger--boolean--
block--boolean--
children--ReactNode--
classNames--{icon:string}--
styles--{icon:object}--
style--{}--
dangerouslySetInnerHTML--{__html:string|TrustedHTML}--
onCopy--(event:E)=>void--
onCopyCapture--(event:E)=>void--
onCut--(event:E)=>void--
onCutCapture--(event:E)=>void--
onPaste--(event:E)=>void--
onPasteCapture--(event:E)=>void--
onCompositionEnd--(event:E)=>void--
onCompositionEndCapture--(event:E)=>void--
onCompositionStart--(event:E)=>void--
onCompositionStartCapture--(event:E)=>void--
onCompositionUpdate--(event:E)=>void--
onCompositionUpdateCapture--(event:E)=>void--
onFocus--(event:E)=>void--
onFocusCapture--(event:E)=>void--
onBlur--(event:E)=>void--
onBlurCapture--(event:E)=>void--
onChange--(event:E)=>void--
onChangeCapture--(event:E)=>void--
onBeforeInput--(event:E)=>void--
onBeforeInputCapture--(event:E)=>void--
onInput--(event:E)=>void--
onInputCapture--(event:E)=>void--
onReset--(event:E)=>void--
onResetCapture--(event:E)=>void--
onSubmit--(event:E)=>void--
onSubmitCapture--(event:E)=>void--
onInvalid--(event:E)=>void--
onInvalidCapture--(event:E)=>void--
onLoad--(event:E)=>void--
onLoadCapture--(event:E)=>void--
onError--(event:E)=>void--
onErrorCapture--(event:E)=>void--
onKeyDown--(event:E)=>void--
onKeyDownCapture--(event:E)=>void--
onKeyPress--(event:E)=>void--
onKeyPressCapture--(event:E)=>void--
onKeyUp--(event:E)=>void--
onKeyUpCapture--(event:E)=>void--
onAbort--(event:E)=>void--
onAbortCapture--(event:E)=>void--
onCanPlay--(event:E)=>void--
onCanPlayCapture--(event:E)=>void--
onCanPlayThrough--(event:E)=>void--
onCanPlayThroughCapture--(event:E)=>void--
onDurationChange--(event:E)=>void--
onDurationChangeCapture--(event:E)=>void--
onEmptied--(event:E)=>void--
onEmptiedCapture--(event:E)=>void--
onEncrypted--(event:E)=>void--
onEncryptedCapture--(event:E)=>void--
onEnded--(event:E)=>void--
onEndedCapture--(event:E)=>void--
onLoadedData--(event:E)=>void--
onLoadedDataCapture--(event:E)=>void--
onLoadedMetadata--(event:E)=>void--
onLoadedMetadataCapture--(event:E)=>void--
onLoadStart--(event:E)=>void--
onLoadStartCapture--(event:E)=>void--
onPause--(event:E)=>void--
onPauseCapture--(event:E)=>void--
onPlay--(event:E)=>void--
onPlayCapture--(event:E)=>void--
onPlaying--(event:E)=>void--
onPlayingCapture--(event:E)=>void--
onProgress--(event:E)=>void--
onProgressCapture--(event:E)=>void--
onRateChange--(event:E)=>void--
onRateChangeCapture--(event:E)=>void--
onResize--(event:E)=>void--
onResizeCapture--(event:E)=>void--
onSeeked--(event:E)=>void--
onSeekedCapture--(event:E)=>void--
onSeeking--(event:E)=>void--
onSeekingCapture--(event:E)=>void--
onStalled--(event:E)=>void--
onStalledCapture--(event:E)=>void--
onSuspend--(event:E)=>void--
onSuspendCapture--(event:E)=>void--
onTimeUpdate--(event:E)=>void--
onTimeUpdateCapture--(event:E)=>void--
onVolumeChange--(event:E)=>void--
onVolumeChangeCapture--(event:E)=>void--
onWaiting--(event:E)=>void--
onWaitingCapture--(event:E)=>void--
onAuxClick--(event:E)=>void--
onAuxClickCapture--(event:E)=>void--
onClick--(event:E)=>void--
onClickCapture--(event:E)=>void--
onContextMenu--(event:E)=>void--
onContextMenuCapture--(event:E)=>void--
onDoubleClick--(event:E)=>void--
onDoubleClickCapture--(event:E)=>void--
onDrag--(event:E)=>void--
onDragCapture--(event:E)=>void--
onDragEnd--(event:E)=>void--
onDragEndCapture--(event:E)=>void--
onDragEnter--(event:E)=>void--
onDragEnterCapture--(event:E)=>void--
onDragExit--(event:E)=>void--
onDragExitCapture--(event:E)=>void--
onDragLeave--(event:E)=>void--
onDragLeaveCapture--(event:E)=>void--
onDragOver--(event:E)=>void--
onDragOverCapture--(event:E)=>void--
onDragStart--(event:E)=>void--
onDragStartCapture--(event:E)=>void--
onDrop--(event:E)=>void--
onDropCapture--(event:E)=>void--
onMouseDown--(event:E)=>void--
onMouseDownCapture--(event:E)=>void--
onMouseEnter--(event:E)=>void--
onMouseLeave--(event:E)=>void--
onMouseMove--(event:E)=>void--
onMouseMoveCapture--(event:E)=>void--
onMouseOut--(event:E)=>void--
onMouseOutCapture--(event:E)=>void--
onMouseOver--(event:E)=>void--
onMouseOverCapture--(event:E)=>void--
onMouseUp--(event:E)=>void--
onMouseUpCapture--(event:E)=>void--
onSelect--(event:E)=>void--
onSelectCapture--(event:E)=>void--
onTouchCancel--(event:E)=>void--
onTouchCancelCapture--(event:E)=>void--
onTouchEnd--(event:E)=>void--
onTouchEndCapture--(event:E)=>void--
onTouchMove--(event:E)=>void--
onTouchMoveCapture--(event:E)=>void--
onTouchStart--(event:E)=>void--
onTouchStartCapture--(event:E)=>void--
onPointerDown--(event:E)=>void--
onPointerDownCapture--(event:E)=>void--
onPointerMove--(event:E)=>void--
onPointerMoveCapture--(event:E)=>void--
onPointerUp--(event:E)=>void--
onPointerUpCapture--(event:E)=>void--
onPointerCancel--(event:E)=>void--
onPointerCancelCapture--(event:E)=>void--
onPointerEnter--(event:E)=>void--
onPointerLeave--(event:E)=>void--
onPointerOver--(event:E)=>void--
onPointerOverCapture--(event:E)=>void--
onPointerOut--(event:E)=>void--
onPointerOutCapture--(event:E)=>void--
onGotPointerCapture--(event:E)=>void--
onGotPointerCaptureCapture--(event:E)=>void--
onLostPointerCapture--(event:E)=>void--
onLostPointerCaptureCapture--(event:E)=>void--
onScroll--(event:E)=>void--
onScrollCapture--(event:E)=>void--
onWheel--(event:E)=>void--
onWheelCapture--(event:E)=>void--
onAnimationStart--(event:E)=>void--
onAnimationStartCapture--(event:E)=>void--
onAnimationEnd--(event:E)=>void--
onAnimationEndCapture--(event:E)=>void--
onAnimationIteration--(event:E)=>void--
onAnimationIterationCapture--(event:E)=>void--
onToggle--(event:E)=>void--
onBeforeToggle--(event:E)=>void--
onTransitionCancel--(event:E)=>void--
onTransitionCancelCapture--(event:E)=>void--
onTransitionEnd--(event:E)=>void--
onTransitionEndCapture--(event:E)=>void--
onTransitionRun--(event:E)=>void--
onTransitionRunCapture--(event:E)=>void--
onTransitionStart--(event:E)=>void--
onTransitionStartCapture--(event:E)=>void--
defaultChecked--boolean--
defaultValue--string|number|ReadonlyArray--
suppressContentEditableWarning--boolean--
suppressHydrationWarning--boolean--
accessKey--string--
autoCapitalize--off|none|on|sentences|words|characters|string--
autoFocus--boolean--
contentEditable--Booleanish|inherit|plaintext-only--
contextMenu--string--
dir--string--
draggable--true|false|boolean--
enterKeyHint--"enter"|"done"|"go"|"next"|"previous"|"search"|"send"--
hidden--boolean--
id--string--
lang--string--
nonce--string--
slot--string--
spellCheck--true|false|boolean--
tabIndex--number--
title--string--
translate--"yes"|"no"--
radioGroup--string--
role--term|none|string|search|alert|alertdialog|application|article|banner|button|cell|checkbox|columnheader|combobox|complementary|contentinfo|definition|dialog|directory|document|feed|figure|form|grid|gridcell|group|heading|img|link|list|listbox|listitem|log|main|marquee|math|menu|menubar|menuitem|menuitemcheckbox|menuitemradio|navigation|note|option|presentation|progressbar|radio|radiogroup|region|row|rowgroup|rowheader|scrollbar|searchbox|separator|slider|spinbutton|status|switch|tab|table|tablist|tabpanel|textbox|timer|toolbar|tooltip|tree|treegrid|treeitem--
about--string--
content--string--
datatype--string--
inlist--any--
prefix--string--
property--string--
rel--string--
resource--string--
rev--string--
typeof--string--
vocab--string--
autoCorrect--string--
autoSave--string--
itemProp--string--
itemScope--boolean--
itemType--string--
itemID--string--
itemRef--string--
results--number--
security--string--
unselectable--"off"|"on"--
popover--""|"auto"|"manual"--
popoverTargetAction--"toggle"|"show"|"hide"--
popoverTarget--string--
inert--boolean--
inputModeHints at the type of data that might be entered by the user while editing the element or its contents"text"|"url"|"none"|"search"|"tel"|"email"|"numeric"|"decimal"--
isSpecify that a standard HTML element should behave like a defined custom built-in elementstring--
form--string--
formAction--string|(formData:FormData)=>void|Promise|unknown--
formEncType--string--
formMethod--string--
formNoValidate--boolean--
formTarget--string--
name--string--
value--string|ReadonlyArray|number--
download--any--
hrefLang--string--
media--string--
ping--string--
target--string|_self|_blank|_parent|_top--
referrerPolicy--""|"no-referrer"|"no-referrer-when-downgrade"|"origin"|"origin-when-cross-origin"|"same-origin"|"strict-origin"|"strict-origin-when-cross-origin"|"unsafe-url"--