Pill
A flexible badge component designed for a variety of use cases.
Powered by
Installation
npx kibo-ui@latest add pill
Features
- Customizable badge-like component with rounded corners and consistent padding
- Support for avatars with fallback options
- Built-in status indicators with variants (success, error, warning, info) and pulse animation
- Delta indicators for showing changes (increase/decrease)
- Icon support with consistent styling
- Avatar groups with overlapping effect
- Ghost button integration
- Themeable variants
Examples
Avatar
A simple pill with an avatar and text.
Status
A pill with a status indicator and text.
Button
A pill with a button for dismissal.
Indicator
Pills with different indicator states.
Delta
Pills showing different delta states.
Icon
A pill with an icon and text.
Avatar Group
A pill with multiple avatars grouped together.
Props
The pill is made up of the following subcomponents:
Pill
The Pill component is used to display a pill.
| Prop | Type | Default |
|---|---|---|
defaultChecked? | boolean | - |
defaultValue? | string | number | readonly string[] | - |
suppressContentEditableWarning? | boolean | - |
suppressHydrationWarning? | boolean | - |
accessKey? | string | - |
autoCapitalize? | "off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {}) | - |
autoFocus? | boolean | - |
className? | string | - |
contentEditable? | Booleanish | "inherit" | "plaintext-only" | - |
contextMenu? | string | - |
dir? | string | - |
draggable? | Booleanish | - |
enterKeyHint? | "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | - |
hidden? | boolean | - |
id? | string | - |
lang? | string | - |
nonce? | string | - |
slot? | string | - |
spellCheck? | Booleanish | - |
style? | CSSProperties | - |
tabIndex? | number | - |
title? | string | - |
translate? | "yes" | "no" | - |
radioGroup? | string | - |
role? | AriaRole | - |
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 | - |
color? | 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 | - |
inputMode? | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | - |
is? | string | - |
aria-activedescendant? | string | - |
aria-atomic? | Booleanish | - |
aria-autocomplete? | "none" | "list" | "inline" | "both" | - |
aria-braillelabel? | string | - |
aria-brailleroledescription? | string | - |
aria-busy? | Booleanish | - |
aria-checked? | boolean | "true" | "false" | "mixed" | - |
aria-colcount? | number | - |
aria-colindex? | number | - |
aria-colindextext? | string | - |
aria-colspan? | number | - |
aria-controls? | string | - |
aria-current? | boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | - |
aria-describedby? | string | - |
aria-description? | string | - |
aria-details? | string | - |
aria-disabled? | Booleanish | - |
aria-dropeffect? | "none" | "link" | "copy" | "execute" | "move" | "popup" | - |
aria-errormessage? | string | - |
aria-expanded? | Booleanish | - |
aria-flowto? | string | - |
aria-grabbed? | Booleanish | - |
aria-haspopup? | boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | - |
aria-hidden? | Booleanish | - |
aria-invalid? | boolean | "true" | "false" | "grammar" | "spelling" | - |
aria-keyshortcuts? | string | - |
aria-label? | string | - |
aria-labelledby? | string | - |
aria-level? | number | - |
aria-live? | "off" | "assertive" | "polite" | - |
aria-modal? | Booleanish | - |
aria-multiline? | Booleanish | - |
aria-multiselectable? | Booleanish | - |
aria-orientation? | "horizontal" | "vertical" | - |
aria-owns? | string | - |
aria-placeholder? | string | - |
aria-posinset? | number | - |
aria-pressed? | boolean | "true" | "false" | "mixed" | - |
aria-readonly? | Booleanish | - |
aria-relevant? | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | - |
aria-required? | Booleanish | - |
aria-roledescription? | string | - |
aria-rowcount? | number | - |
aria-rowindex? | number | - |
aria-rowindextext? | string | - |
aria-rowspan? | number | - |
aria-selected? | Booleanish | - |
aria-setsize? | number | - |
aria-sort? | "none" | "ascending" | "descending" | "other" | - |
aria-valuemax? | number | - |
aria-valuemin? | number | - |
aria-valuenow? | number | - |
aria-valuetext? | string | - |
children? | ReactNode | - |
dangerouslySetInnerHTML? | { __html: string | TrustedHTML; } | - |
onCopy? | ClipboardEventHandler<HTMLDivElement> | - |
onCopyCapture? | ClipboardEventHandler<HTMLDivElement> | - |
onCut? | ClipboardEventHandler<HTMLDivElement> | - |
onCutCapture? | ClipboardEventHandler<HTMLDivElement> | - |
onPaste? | ClipboardEventHandler<HTMLDivElement> | - |
onPasteCapture? | ClipboardEventHandler<HTMLDivElement> | - |
onCompositionEnd? | CompositionEventHandler<HTMLDivElement> | - |
onCompositionEndCapture? | CompositionEventHandler<HTMLDivElement> | - |
onCompositionStart? | CompositionEventHandler<HTMLDivElement> | - |
onCompositionStartCapture? | CompositionEventHandler<HTMLDivElement> | - |
onCompositionUpdate? | CompositionEventHandler<HTMLDivElement> | - |
onCompositionUpdateCapture? | CompositionEventHandler<HTMLDivElement> | - |
onFocus? | FocusEventHandler<HTMLDivElement> | - |
onFocusCapture? | FocusEventHandler<HTMLDivElement> | - |
onBlur? | FocusEventHandler<HTMLDivElement> | - |
onBlurCapture? | FocusEventHandler<HTMLDivElement> | - |
onChange? | FormEventHandler<HTMLDivElement> | - |
onChangeCapture? | FormEventHandler<HTMLDivElement> | - |
onBeforeInput? | FormEventHandler<HTMLDivElement> | - |
onBeforeInputCapture? | FormEventHandler<HTMLDivElement> | - |
onInput? | FormEventHandler<HTMLDivElement> | - |
onInputCapture? | FormEventHandler<HTMLDivElement> | - |
onReset? | FormEventHandler<HTMLDivElement> | - |
onResetCapture? | FormEventHandler<HTMLDivElement> | - |
onSubmit? | FormEventHandler<HTMLDivElement> | - |
onSubmitCapture? | FormEventHandler<HTMLDivElement> | - |
onInvalid? | FormEventHandler<HTMLDivElement> | - |
onInvalidCapture? | FormEventHandler<HTMLDivElement> | - |
onLoad? | ReactEventHandler<HTMLDivElement> | - |
onLoadCapture? | ReactEventHandler<HTMLDivElement> | - |
onError? | ReactEventHandler<HTMLDivElement> | - |
onErrorCapture? | ReactEventHandler<HTMLDivElement> | - |
onKeyDown? | KeyboardEventHandler<HTMLDivElement> | - |
onKeyDownCapture? | KeyboardEventHandler<HTMLDivElement> | - |
onKeyPress? | KeyboardEventHandler<HTMLDivElement> | - |
onKeyPressCapture? | KeyboardEventHandler<HTMLDivElement> | - |
onKeyUp? | KeyboardEventHandler<HTMLDivElement> | - |
onKeyUpCapture? | KeyboardEventHandler<HTMLDivElement> | - |
onAbort? | ReactEventHandler<HTMLDivElement> | - |
onAbortCapture? | ReactEventHandler<HTMLDivElement> | - |
onCanPlay? | ReactEventHandler<HTMLDivElement> | - |
onCanPlayCapture? | ReactEventHandler<HTMLDivElement> | - |
onCanPlayThrough? | ReactEventHandler<HTMLDivElement> | - |
onCanPlayThroughCapture? | ReactEventHandler<HTMLDivElement> | - |
onDurationChange? | ReactEventHandler<HTMLDivElement> | - |
onDurationChangeCapture? | ReactEventHandler<HTMLDivElement> | - |
onEmptied? | ReactEventHandler<HTMLDivElement> | - |
onEmptiedCapture? | ReactEventHandler<HTMLDivElement> | - |
onEncrypted? | ReactEventHandler<HTMLDivElement> | - |
onEncryptedCapture? | ReactEventHandler<HTMLDivElement> | - |
onEnded? | ReactEventHandler<HTMLDivElement> | - |
onEndedCapture? | ReactEventHandler<HTMLDivElement> | - |
onLoadedData? | ReactEventHandler<HTMLDivElement> | - |
onLoadedDataCapture? | ReactEventHandler<HTMLDivElement> | - |
onLoadedMetadata? | ReactEventHandler<HTMLDivElement> | - |
onLoadedMetadataCapture? | ReactEventHandler<HTMLDivElement> | - |
onLoadStart? | ReactEventHandler<HTMLDivElement> | - |
onLoadStartCapture? | ReactEventHandler<HTMLDivElement> | - |
onPause? | ReactEventHandler<HTMLDivElement> | - |
onPauseCapture? | ReactEventHandler<HTMLDivElement> | - |
onPlay? | ReactEventHandler<HTMLDivElement> | - |
onPlayCapture? | ReactEventHandler<HTMLDivElement> | - |
onPlaying? | ReactEventHandler<HTMLDivElement> | - |
onPlayingCapture? | ReactEventHandler<HTMLDivElement> | - |
onProgress? | ReactEventHandler<HTMLDivElement> | - |
onProgressCapture? | ReactEventHandler<HTMLDivElement> | - |
onRateChange? | ReactEventHandler<HTMLDivElement> | - |
onRateChangeCapture? | ReactEventHandler<HTMLDivElement> | - |
onResize? | ReactEventHandler<HTMLDivElement> | - |
onResizeCapture? | ReactEventHandler<HTMLDivElement> | - |
onSeeked? | ReactEventHandler<HTMLDivElement> | - |
onSeekedCapture? | ReactEventHandler<HTMLDivElement> | - |
onSeeking? | ReactEventHandler<HTMLDivElement> | - |
onSeekingCapture? | ReactEventHandler<HTMLDivElement> | - |
onStalled? | ReactEventHandler<HTMLDivElement> | - |
onStalledCapture? | ReactEventHandler<HTMLDivElement> | - |
onSuspend? | ReactEventHandler<HTMLDivElement> | - |
onSuspendCapture? | ReactEventHandler<HTMLDivElement> | - |
onTimeUpdate? | ReactEventHandler<HTMLDivElement> | - |
onTimeUpdateCapture? | ReactEventHandler<HTMLDivElement> | - |
onVolumeChange? | ReactEventHandler<HTMLDivElement> | - |
onVolumeChangeCapture? | ReactEventHandler<HTMLDivElement> | - |
onWaiting? | ReactEventHandler<HTMLDivElement> | - |
onWaitingCapture? | ReactEventHandler<HTMLDivElement> | - |
onAuxClick? | MouseEventHandler<HTMLDivElement> | - |
onAuxClickCapture? | MouseEventHandler<HTMLDivElement> | - |
onClick? | MouseEventHandler<HTMLDivElement> | - |
onClickCapture? | MouseEventHandler<HTMLDivElement> | - |
onContextMenu? | MouseEventHandler<HTMLDivElement> | - |
onContextMenuCapture? | MouseEventHandler<HTMLDivElement> | - |
onDoubleClick? | MouseEventHandler<HTMLDivElement> | - |
onDoubleClickCapture? | MouseEventHandler<HTMLDivElement> | - |
onDrag? | DragEventHandler<HTMLDivElement> | - |
onDragCapture? | DragEventHandler<HTMLDivElement> | - |
onDragEnd? | DragEventHandler<HTMLDivElement> | - |
onDragEndCapture? | DragEventHandler<HTMLDivElement> | - |
onDragEnter? | DragEventHandler<HTMLDivElement> | - |
onDragEnterCapture? | DragEventHandler<HTMLDivElement> | - |
onDragExit? | DragEventHandler<HTMLDivElement> | - |
onDragExitCapture? | DragEventHandler<HTMLDivElement> | - |
onDragLeave? | DragEventHandler<HTMLDivElement> | - |
onDragLeaveCapture? | DragEventHandler<HTMLDivElement> | - |
onDragOver? | DragEventHandler<HTMLDivElement> | - |
onDragOverCapture? | DragEventHandler<HTMLDivElement> | - |
onDragStart? | DragEventHandler<HTMLDivElement> | - |
onDragStartCapture? | DragEventHandler<HTMLDivElement> | - |
onDrop? | DragEventHandler<HTMLDivElement> | - |
onDropCapture? | DragEventHandler<HTMLDivElement> | - |
onMouseDown? | MouseEventHandler<HTMLDivElement> | - |
onMouseDownCapture? | MouseEventHandler<HTMLDivElement> | - |
onMouseEnter? | MouseEventHandler<HTMLDivElement> | - |
onMouseLeave? | MouseEventHandler<HTMLDivElement> | - |
onMouseMove? | MouseEventHandler<HTMLDivElement> | - |
onMouseMoveCapture? | MouseEventHandler<HTMLDivElement> | - |
onMouseOut? | MouseEventHandler<HTMLDivElement> | - |
onMouseOutCapture? | MouseEventHandler<HTMLDivElement> | - |
onMouseOver? | MouseEventHandler<HTMLDivElement> | - |
onMouseOverCapture? | MouseEventHandler<HTMLDivElement> | - |
onMouseUp? | MouseEventHandler<HTMLDivElement> | - |
onMouseUpCapture? | MouseEventHandler<HTMLDivElement> | - |
onSelect? | ReactEventHandler<HTMLDivElement> | - |
onSelectCapture? | ReactEventHandler<HTMLDivElement> | - |
onTouchCancel? | TouchEventHandler<HTMLDivElement> | - |
onTouchCancelCapture? | TouchEventHandler<HTMLDivElement> | - |
onTouchEnd? | TouchEventHandler<HTMLDivElement> | - |
onTouchEndCapture? | TouchEventHandler<HTMLDivElement> | - |
onTouchMove? | TouchEventHandler<HTMLDivElement> | - |
onTouchMoveCapture? | TouchEventHandler<HTMLDivElement> | - |
onTouchStart? | TouchEventHandler<HTMLDivElement> | - |
onTouchStartCapture? | TouchEventHandler<HTMLDivElement> | - |
onPointerDown? | PointerEventHandler<HTMLDivElement> | - |
onPointerDownCapture? | PointerEventHandler<HTMLDivElement> | - |
onPointerMove? | PointerEventHandler<HTMLDivElement> | - |
onPointerMoveCapture? | PointerEventHandler<HTMLDivElement> | - |
onPointerUp? | PointerEventHandler<HTMLDivElement> | - |
onPointerUpCapture? | PointerEventHandler<HTMLDivElement> | - |
onPointerCancel? | PointerEventHandler<HTMLDivElement> | - |
onPointerCancelCapture? | PointerEventHandler<HTMLDivElement> | - |
onPointerEnter? | PointerEventHandler<HTMLDivElement> | - |
onPointerLeave? | PointerEventHandler<HTMLDivElement> | - |
onPointerOver? | PointerEventHandler<HTMLDivElement> | - |
onPointerOverCapture? | PointerEventHandler<HTMLDivElement> | - |
onPointerOut? | PointerEventHandler<HTMLDivElement> | - |
onPointerOutCapture? | PointerEventHandler<HTMLDivElement> | - |
onGotPointerCapture? | PointerEventHandler<HTMLDivElement> | - |
onGotPointerCaptureCapture? | PointerEventHandler<HTMLDivElement> | - |
onLostPointerCapture? | PointerEventHandler<HTMLDivElement> | - |
onLostPointerCaptureCapture? | PointerEventHandler<HTMLDivElement> | - |
onScroll? | UIEventHandler<HTMLDivElement> | - |
onScrollCapture? | UIEventHandler<HTMLDivElement> | - |
onWheel? | WheelEventHandler<HTMLDivElement> | - |
onWheelCapture? | WheelEventHandler<HTMLDivElement> | - |
onAnimationStart? | AnimationEventHandler<HTMLDivElement> | - |
onAnimationStartCapture? | AnimationEventHandler<HTMLDivElement> | - |
onAnimationEnd? | AnimationEventHandler<HTMLDivElement> | - |
onAnimationEndCapture? | AnimationEventHandler<HTMLDivElement> | - |
onAnimationIteration? | AnimationEventHandler<HTMLDivElement> | - |
onAnimationIterationCapture? | AnimationEventHandler<HTMLDivElement> | - |
onToggle? | ToggleEventHandler<HTMLDivElement> | - |
onBeforeToggle? | ToggleEventHandler<HTMLDivElement> | - |
onTransitionCancel? | TransitionEventHandler<HTMLDivElement> | - |
onTransitionCancelCapture? | TransitionEventHandler<HTMLDivElement> | - |
onTransitionEnd? | TransitionEventHandler<HTMLDivElement> | - |
onTransitionEndCapture? | TransitionEventHandler<HTMLDivElement> | - |
onTransitionRun? | TransitionEventHandler<HTMLDivElement> | - |
onTransitionRunCapture? | TransitionEventHandler<HTMLDivElement> | - |
onTransitionStart? | TransitionEventHandler<HTMLDivElement> | - |
onTransitionStartCapture? | TransitionEventHandler<HTMLDivElement> | - |
variant? | "default" | "secondary" | "destructive" | "outline" | - |
themed? | boolean | - |
PillAvatar
The PillAvatar component is used to display an avatar.
| Prop | Type | Default |
|---|---|---|
slot? | string | - |
style? | CSSProperties | - |
title? | string | - |
key? | Key | - |
alt? | string | - |
crossOrigin? | CrossOrigin | - |
decoding? | "async" | "auto" | "sync" | - |
fetchPriority? | "auto" | "high" | "low" | - |
height? | string | number | - |
loading? | "eager" | "lazy" | - |
referrerPolicy? | HTMLAttributeReferrerPolicy | - |
sizes? | string | - |
src? | string | - |
srcSet? | string | - |
useMap? | string | - |
width? | string | number | - |
defaultChecked? | boolean | - |
defaultValue? | string | number | readonly string[] | - |
suppressContentEditableWarning? | boolean | - |
suppressHydrationWarning? | boolean | - |
accessKey? | string | - |
autoCapitalize? | "off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {}) | - |
autoFocus? | boolean | - |
className? | string | - |
contentEditable? | Booleanish | "inherit" | "plaintext-only" | - |
contextMenu? | string | - |
dir? | string | - |
draggable? | Booleanish | - |
enterKeyHint? | "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | - |
hidden? | boolean | - |
id? | string | - |
lang? | string | - |
nonce? | string | - |
spellCheck? | Booleanish | - |
tabIndex? | number | - |
translate? | "yes" | "no" | - |
radioGroup? | string | - |
role? | AriaRole | - |
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 | - |
color? | 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 | - |
inputMode? | "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | - |
is? | string | - |
aria-activedescendant? | string | - |
aria-atomic? | Booleanish | - |
aria-autocomplete? | "none" | "list" | "inline" | "both" | - |
aria-braillelabel? | string | - |
aria-brailleroledescription? | string | - |
aria-busy? | Booleanish | - |
aria-checked? | boolean | "true" | "false" | "mixed" | - |
aria-colcount? | number | - |
aria-colindex? | number | - |
aria-colindextext? | string | - |
aria-colspan? | number | - |
aria-controls? | string | - |
aria-current? | boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | - |
aria-describedby? | string | - |
aria-description? | string | - |
aria-details? | string | - |
aria-disabled? | Booleanish | - |
aria-dropeffect? | "link" | "none" | "copy" | "execute" | "move" | "popup" | - |
aria-errormessage? | string | - |
aria-expanded? | Booleanish | - |
aria-flowto? | string | - |
aria-grabbed? | Booleanish | - |
aria-haspopup? | boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | - |
aria-hidden? | Booleanish | - |
aria-invalid? | boolean | "true" | "false" | "grammar" | "spelling" | - |
aria-keyshortcuts? | string | - |
aria-label? | string | - |
aria-labelledby? | string | - |
aria-level? | number | - |
aria-live? | "off" | "assertive" | "polite" | - |
aria-modal? | Booleanish | - |
aria-multiline? | Booleanish | - |
aria-multiselectable? | Booleanish | - |
aria-orientation? | "horizontal" | "vertical" | - |
aria-owns? | string | - |
aria-placeholder? | string | - |
aria-posinset? | number | - |
aria-pressed? | boolean | "true" | "false" | "mixed" | - |
aria-readonly? | Booleanish | - |
aria-relevant? | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | - |
aria-required? | Booleanish | - |
aria-roledescription? | string | - |
aria-rowcount? | number | - |
aria-rowindex? | number | - |
aria-rowindextext? | string | - |
aria-rowspan? | number | - |
aria-selected? | Booleanish | - |
aria-setsize? | number | - |
aria-sort? | "none" | "ascending" | "descending" | "other" | - |
aria-valuemax? | number | - |
aria-valuemin? | number | - |
aria-valuenow? | number | - |
aria-valuetext? | string | - |
children? | ReactNode | - |
dangerouslySetInnerHTML? | { __html: string | TrustedHTML; } | - |
onCopy? | ClipboardEventHandler<HTMLImageElement> | - |
onCopyCapture? | ClipboardEventHandler<HTMLImageElement> | - |
onCut? | ClipboardEventHandler<HTMLImageElement> | - |
onCutCapture? | ClipboardEventHandler<HTMLImageElement> | - |
onPaste? | ClipboardEventHandler<HTMLImageElement> | - |
onPasteCapture? | ClipboardEventHandler<HTMLImageElement> | - |
onCompositionEnd? | CompositionEventHandler<HTMLImageElement> | - |
onCompositionEndCapture? | CompositionEventHandler<HTMLImageElement> | - |
onCompositionStart? | CompositionEventHandler<HTMLImageElement> | - |
onCompositionStartCapture? | CompositionEventHandler<HTMLImageElement> | - |
onCompositionUpdate? | CompositionEventHandler<HTMLImageElement> | - |
onCompositionUpdateCapture? | CompositionEventHandler<HTMLImageElement> | - |
onFocus? | FocusEventHandler<HTMLImageElement> | - |
onFocusCapture? | FocusEventHandler<HTMLImageElement> | - |
onBlur? | FocusEventHandler<HTMLImageElement> | - |
onBlurCapture? | FocusEventHandler<HTMLImageElement> | - |
onChange? | FormEventHandler<HTMLImageElement> | - |
onChangeCapture? | FormEventHandler<HTMLImageElement> | - |
onBeforeInput? | FormEventHandler<HTMLImageElement> | - |
onBeforeInputCapture? | FormEventHandler<HTMLImageElement> | - |
onInput? | FormEventHandler<HTMLImageElement> | - |
onInputCapture? | FormEventHandler<HTMLImageElement> | - |
onReset? | FormEventHandler<HTMLImageElement> | - |
onResetCapture? | FormEventHandler<HTMLImageElement> | - |
onSubmit? | FormEventHandler<HTMLImageElement> | - |
onSubmitCapture? | FormEventHandler<HTMLImageElement> | - |
onInvalid? | FormEventHandler<HTMLImageElement> | - |
onInvalidCapture? | FormEventHandler<HTMLImageElement> | - |
onLoad? | ReactEventHandler<HTMLImageElement> | - |
onLoadCapture? | ReactEventHandler<HTMLImageElement> | - |
onError? | ReactEventHandler<HTMLImageElement> | - |
onErrorCapture? | ReactEventHandler<HTMLImageElement> | - |
onKeyDown? | KeyboardEventHandler<HTMLImageElement> | - |
onKeyDownCapture? | KeyboardEventHandler<HTMLImageElement> | - |
onKeyPress? | KeyboardEventHandler<HTMLImageElement> | - |
onKeyPressCapture? | KeyboardEventHandler<HTMLImageElement> | - |
onKeyUp? | KeyboardEventHandler<HTMLImageElement> | - |
onKeyUpCapture? | KeyboardEventHandler<HTMLImageElement> | - |
onAbort? | ReactEventHandler<HTMLImageElement> | - |
onAbortCapture? | ReactEventHandler<HTMLImageElement> | - |
onCanPlay? | ReactEventHandler<HTMLImageElement> | - |
onCanPlayCapture? | ReactEventHandler<HTMLImageElement> | - |
onCanPlayThrough? | ReactEventHandler<HTMLImageElement> | - |
onCanPlayThroughCapture? | ReactEventHandler<HTMLImageElement> | - |
onDurationChange? | ReactEventHandler<HTMLImageElement> | - |
onDurationChangeCapture? | ReactEventHandler<HTMLImageElement> | - |
onEmptied? | ReactEventHandler<HTMLImageElement> | - |
onEmptiedCapture? | ReactEventHandler<HTMLImageElement> | - |
onEncrypted? | ReactEventHandler<HTMLImageElement> | - |
onEncryptedCapture? | ReactEventHandler<HTMLImageElement> | - |
onEnded? | ReactEventHandler<HTMLImageElement> | - |
onEndedCapture? | ReactEventHandler<HTMLImageElement> | - |
onLoadedData? | ReactEventHandler<HTMLImageElement> | - |
onLoadedDataCapture? | ReactEventHandler<HTMLImageElement> | - |
onLoadedMetadata? | ReactEventHandler<HTMLImageElement> | - |
onLoadedMetadataCapture? | ReactEventHandler<HTMLImageElement> | - |
onLoadStart? | ReactEventHandler<HTMLImageElement> | - |
onLoadStartCapture? | ReactEventHandler<HTMLImageElement> | - |
onPause? | ReactEventHandler<HTMLImageElement> | - |
onPauseCapture? | ReactEventHandler<HTMLImageElement> | - |
onPlay? | ReactEventHandler<HTMLImageElement> | - |
onPlayCapture? | ReactEventHandler<HTMLImageElement> | - |
onPlaying? | ReactEventHandler<HTMLImageElement> | - |
onPlayingCapture? | ReactEventHandler<HTMLImageElement> | - |
onProgress? | ReactEventHandler<HTMLImageElement> | - |
onProgressCapture? | ReactEventHandler<HTMLImageElement> | - |
onRateChange? | ReactEventHandler<HTMLImageElement> | - |
onRateChangeCapture? | ReactEventHandler<HTMLImageElement> | - |
onResize? | ReactEventHandler<HTMLImageElement> | - |
onResizeCapture? | ReactEventHandler<HTMLImageElement> | - |
onSeeked? | ReactEventHandler<HTMLImageElement> | - |
onSeekedCapture? | ReactEventHandler<HTMLImageElement> | - |
onSeeking? | ReactEventHandler<HTMLImageElement> | - |
onSeekingCapture? | ReactEventHandler<HTMLImageElement> | - |
onStalled? | ReactEventHandler<HTMLImageElement> | - |
onStalledCapture? | ReactEventHandler<HTMLImageElement> | - |
onSuspend? | ReactEventHandler<HTMLImageElement> | - |
onSuspendCapture? | ReactEventHandler<HTMLImageElement> | - |
onTimeUpdate? | ReactEventHandler<HTMLImageElement> | - |
onTimeUpdateCapture? | ReactEventHandler<HTMLImageElement> | - |
onVolumeChange? | ReactEventHandler<HTMLImageElement> | - |
onVolumeChangeCapture? | ReactEventHandler<HTMLImageElement> | - |
onWaiting? | ReactEventHandler<HTMLImageElement> | - |
onWaitingCapture? | ReactEventHandler<HTMLImageElement> | - |
onAuxClick? | MouseEventHandler<HTMLImageElement> | - |
onAuxClickCapture? | MouseEventHandler<HTMLImageElement> | - |
onClick? | MouseEventHandler<HTMLImageElement> | - |
onClickCapture? | MouseEventHandler<HTMLImageElement> | - |
onContextMenu? | MouseEventHandler<HTMLImageElement> | - |
onContextMenuCapture? | MouseEventHandler<HTMLImageElement> | - |
onDoubleClick? | MouseEventHandler<HTMLImageElement> | - |
onDoubleClickCapture? | MouseEventHandler<HTMLImageElement> | - |
onDrag? | DragEventHandler<HTMLImageElement> | - |
onDragCapture? | DragEventHandler<HTMLImageElement> | - |
onDragEnd? | DragEventHandler<HTMLImageElement> | - |
onDragEndCapture? | DragEventHandler<HTMLImageElement> | - |
onDragEnter? | DragEventHandler<HTMLImageElement> | - |
onDragEnterCapture? | DragEventHandler<HTMLImageElement> | - |
onDragExit? | DragEventHandler<HTMLImageElement> | - |
onDragExitCapture? | DragEventHandler<HTMLImageElement> | - |
onDragLeave? | DragEventHandler<HTMLImageElement> | - |
onDragLeaveCapture? | DragEventHandler<HTMLImageElement> | - |
onDragOver? | DragEventHandler<HTMLImageElement> | - |
onDragOverCapture? | DragEventHandler<HTMLImageElement> | - |
onDragStart? | DragEventHandler<HTMLImageElement> | - |
onDragStartCapture? | DragEventHandler<HTMLImageElement> | - |
onDrop? | DragEventHandler<HTMLImageElement> | - |
onDropCapture? | DragEventHandler<HTMLImageElement> | - |
onMouseDown? | MouseEventHandler<HTMLImageElement> | - |
onMouseDownCapture? | MouseEventHandler<HTMLImageElement> | - |
onMouseEnter? | MouseEventHandler<HTMLImageElement> | - |
onMouseLeave? | MouseEventHandler<HTMLImageElement> | - |
onMouseMove? | MouseEventHandler<HTMLImageElement> | - |
onMouseMoveCapture? | MouseEventHandler<HTMLImageElement> | - |
onMouseOut? | MouseEventHandler<HTMLImageElement> | - |
onMouseOutCapture? | MouseEventHandler<HTMLImageElement> | - |
onMouseOver? | MouseEventHandler<HTMLImageElement> | - |
onMouseOverCapture? | MouseEventHandler<HTMLImageElement> | - |
onMouseUp? | MouseEventHandler<HTMLImageElement> | - |
onMouseUpCapture? | MouseEventHandler<HTMLImageElement> | - |
onSelect? | ReactEventHandler<HTMLImageElement> | - |
onSelectCapture? | ReactEventHandler<HTMLImageElement> | - |
onTouchCancel? | TouchEventHandler<HTMLImageElement> | - |
onTouchCancelCapture? | TouchEventHandler<HTMLImageElement> | - |
onTouchEnd? | TouchEventHandler<HTMLImageElement> | - |
onTouchEndCapture? | TouchEventHandler<HTMLImageElement> | - |
onTouchMove? | TouchEventHandler<HTMLImageElement> | - |
onTouchMoveCapture? | TouchEventHandler<HTMLImageElement> | - |
onTouchStart? | TouchEventHandler<HTMLImageElement> | - |
onTouchStartCapture? | TouchEventHandler<HTMLImageElement> | - |
onPointerDown? | PointerEventHandler<HTMLImageElement> | - |
onPointerDownCapture? | PointerEventHandler<HTMLImageElement> | - |
onPointerMove? | PointerEventHandler<HTMLImageElement> | - |
onPointerMoveCapture? | PointerEventHandler<HTMLImageElement> | - |
onPointerUp? | PointerEventHandler<HTMLImageElement> | - |
onPointerUpCapture? | PointerEventHandler<HTMLImageElement> | - |
onPointerCancel? | PointerEventHandler<HTMLImageElement> | - |
onPointerCancelCapture? | PointerEventHandler<HTMLImageElement> | - |
onPointerEnter? | PointerEventHandler<HTMLImageElement> | - |
onPointerLeave? | PointerEventHandler<HTMLImageElement> | - |
onPointerOver? | PointerEventHandler<HTMLImageElement> | - |
onPointerOverCapture? | PointerEventHandler<HTMLImageElement> | - |
onPointerOut? | PointerEventHandler<HTMLImageElement> | - |
onPointerOutCapture? | PointerEventHandler<HTMLImageElement> | - |
onGotPointerCapture? | PointerEventHandler<HTMLImageElement> | - |
onGotPointerCaptureCapture? | PointerEventHandler<HTMLImageElement> | - |
onLostPointerCapture? | PointerEventHandler<HTMLImageElement> | - |
onLostPointerCaptureCapture? | PointerEventHandler<HTMLImageElement> | - |
onScroll? | UIEventHandler<HTMLImageElement> | - |
onScrollCapture? | UIEventHandler<HTMLImageElement> | - |
onWheel? | WheelEventHandler<HTMLImageElement> | - |
onWheelCapture? | WheelEventHandler<HTMLImageElement> | - |
onAnimationStart? | AnimationEventHandler<HTMLImageElement> | - |
onAnimationStartCapture? | AnimationEventHandler<HTMLImageElement> | - |
onAnimationEnd? | AnimationEventHandler<HTMLImageElement> | - |
onAnimationEndCapture? | AnimationEventHandler<HTMLImageElement> | - |
onAnimationIteration? | AnimationEventHandler<HTMLImageElement> | - |
onAnimationIterationCapture? | AnimationEventHandler<HTMLImageElement> | - |
onToggle? | ToggleEventHandler<HTMLImageElement> | - |
onBeforeToggle? | ToggleEventHandler<HTMLImageElement> | - |
onTransitionCancel? | TransitionEventHandler<HTMLImageElement> | - |
onTransitionCancelCapture? | TransitionEventHandler<HTMLImageElement> | - |
onTransitionEnd? | TransitionEventHandler<HTMLImageElement> | - |
onTransitionEndCapture? | TransitionEventHandler<HTMLImageElement> | - |
onTransitionRun? | TransitionEventHandler<HTMLImageElement> | - |
onTransitionRunCapture? | TransitionEventHandler<HTMLImageElement> | - |
onTransitionStart? | TransitionEventHandler<HTMLImageElement> | - |
onTransitionStartCapture? | TransitionEventHandler<HTMLImageElement> | - |
asChild? | boolean | - |
onLoadingStatusChange? | (status: ImageLoadingStatus) => void | - |
ref? | ((instance: HTMLImageElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLImageElement | null> | - |
fallback? | string | - |
PillStatus
The PillStatus component is used to display a status.
| Prop | Type | Default |
|---|---|---|
children | ReactNode | - |
className? | string | - |
PillButton
The PillButton component is used to display a button.
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | - |
disabled? | boolean | - |
form? | string | - |
formAction? | string | ((formData: FormData) => void | Promise<void>) | - |
formEncType? | string | - |
formMethod? | string | - |
formNoValidate? | boolean | - |
formTarget? | string | - |
name? | string | - |
type? | "submit" | "reset" | "button" | - |
value? | string | number | readonly string[] | - |
defaultChecked? | boolean | - |
defaultValue? | string | number | readonly string[] | - |
suppressContentEditableWarning? | boolean | - |
suppressHydrationWarning? | boolean | - |
accessKey? | string | - |
autoCapitalize? | "off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {}) | - |
autoFocus? | boolean | - |
className? | string | - |
contentEditable? | Booleanish | "inherit" | "plaintext-only" | - |
contextMenu? | string | - |
dir? | string | - |
draggable? | Booleanish | - |
enterKeyHint? | "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | - |
hidden? | boolean | - |
id? | string | - |
lang? | string | - |
nonce? | string | - |
slot? | string | - |
spellCheck? | Booleanish | - |
style? | CSSProperties | - |
tabIndex? | number | - |
title? | string | - |
translate? | "yes" | "no" | - |
radioGroup? | string | - |
role? | AriaRole | - |
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 | - |
color? | 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 | - |
inputMode? | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | - |
is? | string | - |
aria-activedescendant? | string | - |
aria-atomic? | Booleanish | - |
aria-autocomplete? | "none" | "list" | "inline" | "both" | - |
aria-braillelabel? | string | - |
aria-brailleroledescription? | string | - |
aria-busy? | Booleanish | - |
aria-checked? | boolean | "true" | "false" | "mixed" | - |
aria-colcount? | number | - |
aria-colindex? | number | - |
aria-colindextext? | string | - |
aria-colspan? | number | - |
aria-controls? | string | - |
aria-current? | boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | - |
aria-describedby? | string | - |
aria-description? | string | - |
aria-details? | string | - |
aria-disabled? | Booleanish | - |
aria-dropeffect? | "link" | "none" | "copy" | "execute" | "move" | "popup" | - |
aria-errormessage? | string | - |
aria-expanded? | Booleanish | - |
aria-flowto? | string | - |
aria-grabbed? | Booleanish | - |
aria-haspopup? | boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | - |
aria-hidden? | Booleanish | - |
aria-invalid? | boolean | "true" | "false" | "grammar" | "spelling" | - |
aria-keyshortcuts? | string | - |
aria-label? | string | - |
aria-labelledby? | string | - |
aria-level? | number | - |
aria-live? | "off" | "assertive" | "polite" | - |
aria-modal? | Booleanish | - |
aria-multiline? | Booleanish | - |
aria-multiselectable? | Booleanish | - |
aria-orientation? | "horizontal" | "vertical" | - |
aria-owns? | string | - |
aria-placeholder? | string | - |
aria-posinset? | number | - |
aria-pressed? | boolean | "true" | "false" | "mixed" | - |
aria-readonly? | Booleanish | - |
aria-relevant? | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | - |
aria-required? | Booleanish | - |
aria-roledescription? | string | - |
aria-rowcount? | number | - |
aria-rowindex? | number | - |
aria-rowindextext? | string | - |
aria-rowspan? | number | - |
aria-selected? | Booleanish | - |
aria-setsize? | number | - |
aria-sort? | "none" | "ascending" | "descending" | "other" | - |
aria-valuemax? | number | - |
aria-valuemin? | number | - |
aria-valuenow? | number | - |
aria-valuetext? | string | - |
children? | ReactNode | - |
dangerouslySetInnerHTML? | { __html: string | TrustedHTML; } | - |
onCopy? | ClipboardEventHandler<HTMLButtonElement> | - |
onCopyCapture? | ClipboardEventHandler<HTMLButtonElement> | - |
onCut? | ClipboardEventHandler<HTMLButtonElement> | - |
onCutCapture? | ClipboardEventHandler<HTMLButtonElement> | - |
onPaste? | ClipboardEventHandler<HTMLButtonElement> | - |
onPasteCapture? | ClipboardEventHandler<HTMLButtonElement> | - |
onCompositionEnd? | CompositionEventHandler<HTMLButtonElement> | - |
onCompositionEndCapture? | CompositionEventHandler<HTMLButtonElement> | - |
onCompositionStart? | CompositionEventHandler<HTMLButtonElement> | - |
onCompositionStartCapture? | CompositionEventHandler<HTMLButtonElement> | - |
onCompositionUpdate? | CompositionEventHandler<HTMLButtonElement> | - |
onCompositionUpdateCapture? | CompositionEventHandler<HTMLButtonElement> | - |
onFocus? | FocusEventHandler<HTMLButtonElement> | - |
onFocusCapture? | FocusEventHandler<HTMLButtonElement> | - |
onBlur? | FocusEventHandler<HTMLButtonElement> | - |
onBlurCapture? | FocusEventHandler<HTMLButtonElement> | - |
onChange? | FormEventHandler<HTMLButtonElement> | - |
onChangeCapture? | FormEventHandler<HTMLButtonElement> | - |
onBeforeInput? | FormEventHandler<HTMLButtonElement> | - |
onBeforeInputCapture? | FormEventHandler<HTMLButtonElement> | - |
onInput? | FormEventHandler<HTMLButtonElement> | - |
onInputCapture? | FormEventHandler<HTMLButtonElement> | - |
onReset? | FormEventHandler<HTMLButtonElement> | - |
onResetCapture? | FormEventHandler<HTMLButtonElement> | - |
onSubmit? | FormEventHandler<HTMLButtonElement> | - |
onSubmitCapture? | FormEventHandler<HTMLButtonElement> | - |
onInvalid? | FormEventHandler<HTMLButtonElement> | - |
onInvalidCapture? | FormEventHandler<HTMLButtonElement> | - |
onLoad? | ReactEventHandler<HTMLButtonElement> | - |
onLoadCapture? | ReactEventHandler<HTMLButtonElement> | - |
onError? | ReactEventHandler<HTMLButtonElement> | - |
onErrorCapture? | ReactEventHandler<HTMLButtonElement> | - |
onKeyDown? | KeyboardEventHandler<HTMLButtonElement> | - |
onKeyDownCapture? | KeyboardEventHandler<HTMLButtonElement> | - |
onKeyPress? | KeyboardEventHandler<HTMLButtonElement> | - |
onKeyPressCapture? | KeyboardEventHandler<HTMLButtonElement> | - |
onKeyUp? | KeyboardEventHandler<HTMLButtonElement> | - |
onKeyUpCapture? | KeyboardEventHandler<HTMLButtonElement> | - |
onAbort? | ReactEventHandler<HTMLButtonElement> | - |
onAbortCapture? | ReactEventHandler<HTMLButtonElement> | - |
onCanPlay? | ReactEventHandler<HTMLButtonElement> | - |
onCanPlayCapture? | ReactEventHandler<HTMLButtonElement> | - |
onCanPlayThrough? | ReactEventHandler<HTMLButtonElement> | - |
onCanPlayThroughCapture? | ReactEventHandler<HTMLButtonElement> | - |
onDurationChange? | ReactEventHandler<HTMLButtonElement> | - |
onDurationChangeCapture? | ReactEventHandler<HTMLButtonElement> | - |
onEmptied? | ReactEventHandler<HTMLButtonElement> | - |
onEmptiedCapture? | ReactEventHandler<HTMLButtonElement> | - |
onEncrypted? | ReactEventHandler<HTMLButtonElement> | - |
onEncryptedCapture? | ReactEventHandler<HTMLButtonElement> | - |
onEnded? | ReactEventHandler<HTMLButtonElement> | - |
onEndedCapture? | ReactEventHandler<HTMLButtonElement> | - |
onLoadedData? | ReactEventHandler<HTMLButtonElement> | - |
onLoadedDataCapture? | ReactEventHandler<HTMLButtonElement> | - |
onLoadedMetadata? | ReactEventHandler<HTMLButtonElement> | - |
onLoadedMetadataCapture? | ReactEventHandler<HTMLButtonElement> | - |
onLoadStart? | ReactEventHandler<HTMLButtonElement> | - |
onLoadStartCapture? | ReactEventHandler<HTMLButtonElement> | - |
onPause? | ReactEventHandler<HTMLButtonElement> | - |
onPauseCapture? | ReactEventHandler<HTMLButtonElement> | - |
onPlay? | ReactEventHandler<HTMLButtonElement> | - |
onPlayCapture? | ReactEventHandler<HTMLButtonElement> | - |
onPlaying? | ReactEventHandler<HTMLButtonElement> | - |
onPlayingCapture? | ReactEventHandler<HTMLButtonElement> | - |
onProgress? | ReactEventHandler<HTMLButtonElement> | - |
onProgressCapture? | ReactEventHandler<HTMLButtonElement> | - |
onRateChange? | ReactEventHandler<HTMLButtonElement> | - |
onRateChangeCapture? | ReactEventHandler<HTMLButtonElement> | - |
onResize? | ReactEventHandler<HTMLButtonElement> | - |
onResizeCapture? | ReactEventHandler<HTMLButtonElement> | - |
onSeeked? | ReactEventHandler<HTMLButtonElement> | - |
onSeekedCapture? | ReactEventHandler<HTMLButtonElement> | - |
onSeeking? | ReactEventHandler<HTMLButtonElement> | - |
onSeekingCapture? | ReactEventHandler<HTMLButtonElement> | - |
onStalled? | ReactEventHandler<HTMLButtonElement> | - |
onStalledCapture? | ReactEventHandler<HTMLButtonElement> | - |
onSuspend? | ReactEventHandler<HTMLButtonElement> | - |
onSuspendCapture? | ReactEventHandler<HTMLButtonElement> | - |
onTimeUpdate? | ReactEventHandler<HTMLButtonElement> | - |
onTimeUpdateCapture? | ReactEventHandler<HTMLButtonElement> | - |
onVolumeChange? | ReactEventHandler<HTMLButtonElement> | - |
onVolumeChangeCapture? | ReactEventHandler<HTMLButtonElement> | - |
onWaiting? | ReactEventHandler<HTMLButtonElement> | - |
onWaitingCapture? | ReactEventHandler<HTMLButtonElement> | - |
onAuxClick? | MouseEventHandler<HTMLButtonElement> | - |
onAuxClickCapture? | MouseEventHandler<HTMLButtonElement> | - |
onClick? | MouseEventHandler<HTMLButtonElement> | - |
onClickCapture? | MouseEventHandler<HTMLButtonElement> | - |
onContextMenu? | MouseEventHandler<HTMLButtonElement> | - |
onContextMenuCapture? | MouseEventHandler<HTMLButtonElement> | - |
onDoubleClick? | MouseEventHandler<HTMLButtonElement> | - |
onDoubleClickCapture? | MouseEventHandler<HTMLButtonElement> | - |
onDrag? | DragEventHandler<HTMLButtonElement> | - |
onDragCapture? | DragEventHandler<HTMLButtonElement> | - |
onDragEnd? | DragEventHandler<HTMLButtonElement> | - |
onDragEndCapture? | DragEventHandler<HTMLButtonElement> | - |
onDragEnter? | DragEventHandler<HTMLButtonElement> | - |
onDragEnterCapture? | DragEventHandler<HTMLButtonElement> | - |
onDragExit? | DragEventHandler<HTMLButtonElement> | - |
onDragExitCapture? | DragEventHandler<HTMLButtonElement> | - |
onDragLeave? | DragEventHandler<HTMLButtonElement> | - |
onDragLeaveCapture? | DragEventHandler<HTMLButtonElement> | - |
onDragOver? | DragEventHandler<HTMLButtonElement> | - |
onDragOverCapture? | DragEventHandler<HTMLButtonElement> | - |
onDragStart? | DragEventHandler<HTMLButtonElement> | - |
onDragStartCapture? | DragEventHandler<HTMLButtonElement> | - |
onDrop? | DragEventHandler<HTMLButtonElement> | - |
onDropCapture? | DragEventHandler<HTMLButtonElement> | - |
onMouseDown? | MouseEventHandler<HTMLButtonElement> | - |
onMouseDownCapture? | MouseEventHandler<HTMLButtonElement> | - |
onMouseEnter? | MouseEventHandler<HTMLButtonElement> | - |
onMouseLeave? | MouseEventHandler<HTMLButtonElement> | - |
onMouseMove? | MouseEventHandler<HTMLButtonElement> | - |
onMouseMoveCapture? | MouseEventHandler<HTMLButtonElement> | - |
onMouseOut? | MouseEventHandler<HTMLButtonElement> | - |
onMouseOutCapture? | MouseEventHandler<HTMLButtonElement> | - |
onMouseOver? | MouseEventHandler<HTMLButtonElement> | - |
onMouseOverCapture? | MouseEventHandler<HTMLButtonElement> | - |
onMouseUp? | MouseEventHandler<HTMLButtonElement> | - |
onMouseUpCapture? | MouseEventHandler<HTMLButtonElement> | - |
onSelect? | ReactEventHandler<HTMLButtonElement> | - |
onSelectCapture? | ReactEventHandler<HTMLButtonElement> | - |
onTouchCancel? | TouchEventHandler<HTMLButtonElement> | - |
onTouchCancelCapture? | TouchEventHandler<HTMLButtonElement> | - |
onTouchEnd? | TouchEventHandler<HTMLButtonElement> | - |
onTouchEndCapture? | TouchEventHandler<HTMLButtonElement> | - |
onTouchMove? | TouchEventHandler<HTMLButtonElement> | - |
onTouchMoveCapture? | TouchEventHandler<HTMLButtonElement> | - |
onTouchStart? | TouchEventHandler<HTMLButtonElement> | - |
onTouchStartCapture? | TouchEventHandler<HTMLButtonElement> | - |
onPointerDown? | PointerEventHandler<HTMLButtonElement> | - |
onPointerDownCapture? | PointerEventHandler<HTMLButtonElement> | - |
onPointerMove? | PointerEventHandler<HTMLButtonElement> | - |
onPointerMoveCapture? | PointerEventHandler<HTMLButtonElement> | - |
onPointerUp? | PointerEventHandler<HTMLButtonElement> | - |
onPointerUpCapture? | PointerEventHandler<HTMLButtonElement> | - |
onPointerCancel? | PointerEventHandler<HTMLButtonElement> | - |
onPointerCancelCapture? | PointerEventHandler<HTMLButtonElement> | - |
onPointerEnter? | PointerEventHandler<HTMLButtonElement> | - |
onPointerLeave? | PointerEventHandler<HTMLButtonElement> | - |
onPointerOver? | PointerEventHandler<HTMLButtonElement> | - |
onPointerOverCapture? | PointerEventHandler<HTMLButtonElement> | - |
onPointerOut? | PointerEventHandler<HTMLButtonElement> | - |
onPointerOutCapture? | PointerEventHandler<HTMLButtonElement> | - |
onGotPointerCapture? | PointerEventHandler<HTMLButtonElement> | - |
onGotPointerCaptureCapture? | PointerEventHandler<HTMLButtonElement> | - |
onLostPointerCapture? | PointerEventHandler<HTMLButtonElement> | - |
onLostPointerCaptureCapture? | PointerEventHandler<HTMLButtonElement> | - |
onScroll? | UIEventHandler<HTMLButtonElement> | - |
onScrollCapture? | UIEventHandler<HTMLButtonElement> | - |
onWheel? | WheelEventHandler<HTMLButtonElement> | - |
onWheelCapture? | WheelEventHandler<HTMLButtonElement> | - |
onAnimationStart? | AnimationEventHandler<HTMLButtonElement> | - |
onAnimationStartCapture? | AnimationEventHandler<HTMLButtonElement> | - |
onAnimationEnd? | AnimationEventHandler<HTMLButtonElement> | - |
onAnimationEndCapture? | AnimationEventHandler<HTMLButtonElement> | - |
onAnimationIteration? | AnimationEventHandler<HTMLButtonElement> | - |
onAnimationIterationCapture? | AnimationEventHandler<HTMLButtonElement> | - |
onToggle? | ToggleEventHandler<HTMLButtonElement> | - |
onBeforeToggle? | ToggleEventHandler<HTMLButtonElement> | - |
onTransitionCancel? | TransitionEventHandler<HTMLButtonElement> | - |
onTransitionCancelCapture? | TransitionEventHandler<HTMLButtonElement> | - |
onTransitionEnd? | TransitionEventHandler<HTMLButtonElement> | - |
onTransitionEndCapture? | TransitionEventHandler<HTMLButtonElement> | - |
onTransitionRun? | TransitionEventHandler<HTMLButtonElement> | - |
onTransitionRunCapture? | TransitionEventHandler<HTMLButtonElement> | - |
onTransitionStart? | TransitionEventHandler<HTMLButtonElement> | - |
onTransitionStartCapture? | TransitionEventHandler<HTMLButtonElement> | - |
variant? | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | - |
size? | "default" | "sm" | "lg" | "icon" | - |
ref? | RefObject<HTMLButtonElement | null> | ((instance: HTMLButtonElement | null) => void | (() => VoidOrUndefinedOnly)) | - |
key? | Key | - |
PillIndicator
The PillIndicator component is used to display an indicator.
| Prop | Type | Default |
|---|---|---|
variant? | "success" | "error" | "warning" | "info" | - |
pulse? | boolean | - |
PillDelta
The PillDelta component is used to display a delta.
| Prop | Type | Default |
|---|---|---|
children | ReactNode | - |
className? | string | - |
delta | number | - |
PillIcon
The PillIcon component is used to display an icon.
| Prop | Type | Default |
|---|---|---|
icon | ForwardRefExoticComponent<Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>> | - |
className? | string | - |
PillAvatarGroup
The PillAvatarGroup component is used to display an avatar group.
| Prop | Type | Default |
|---|---|---|
children | ReactNode | - |
className? | string | - |