Button
Installation
npx shadcn@latest add https://ui.timkit.cn/r/button.json
Usage
import { Button } from "@/components/ui/button"
Examples
Structured API
Component
button
Logic
none
Runtime Frameworks
ReactVueWeappHTML
Supported Platforms
WebWeChat Mini Program
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | none | State and interaction provider used by this component. |
| logic.machine | string | - | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web, WeChat Mini Program | Platforms officially supported by this schema. |
| frameworks* | array | React, Vue, Weapp, HTML | Framework demos/code currently available in registry files. |
| dependencies | array | @timui/core | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | - | Optional peer dependencies used by this registry item. |
| registryDependencies | array | - | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Visible text label displayed inside the button body。 |
| variant | enum (default | destructive | outline | secondary | ghost | link) | default | Semantic styling preset that maps to shared design tokens。 |
| size | enum (default | sm | lg | icon) | default | Controls the padding and typography size。 |
| disabled | boolean | false | Marks the action as unavailable and prevents pointer / tap。 |
| loading | boolean | false | Shows a busy indicator and disables interactions。 |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
| onPress | event | - | Callback that fires when the user clicks / taps the button。 |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| icon-left | slot | - | Optional leading icon rendered before the label。 |
| default* | slot | - | The button label content，默认渲染 `label` prop。 |
| icon-right | slot | - | Optional trailing icon rendered after the label。 |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The button element itself |
| label | part | - | The text label inside the button |
| icon | part | - | Optional icon element |
Variants
variantdefault: default
Visual intent of the button。
defaultdestructiveoutlinesecondaryghostlink
sizedefault: default
Available control sizes。
defaultsmlgicon
Interaction States
press
Button reacts to tap / click with hover + active states。
defaulthoveractivedisabledloading
This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.
Extended notes are not available for this component yet.
On This Page
- Installation
- Usage
- Examples
- Button · Basic button
- Button · Disabled State
- Button · Rounded button
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · Low emphasis variant
- Button · With icon
- Button · Loading state
- Button · Outlined variant
- Button · With icon
- Button · Rounded button
- Button · With icon
- Button · With icon
- Button · Rounded button
- Button · Rounded button
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · Rounded button
- Button · Rounded button
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · Outlined variant
- Button · Outlined variant
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · Rounded button
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · Rounded button
- Button · With icon
- Button · Talent Agency
- Button · With icon
- Button · With icon
- Button · With icon
- API Reference
Button
Installation
npx shadcn@latest add https://ui.timkit.cn/r/button.json
Usage
import { Button } from "@/components/ui/button"
Examples
Structured API
Component
button
Logic
none
Runtime Frameworks
ReactVueWeappHTML
Supported Platforms
WebWeChat Mini Program
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | none | State and interaction provider used by this component. |
| logic.machine | string | - | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web, WeChat Mini Program | Platforms officially supported by this schema. |
| frameworks* | array | React, Vue, Weapp, HTML | Framework demos/code currently available in registry files. |
| dependencies | array | @timui/core | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | - | Optional peer dependencies used by this registry item. |
| registryDependencies | array | - | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Visible text label displayed inside the button body。 |
| variant | enum (default | destructive | outline | secondary | ghost | link) | default | Semantic styling preset that maps to shared design tokens。 |
| size | enum (default | sm | lg | icon) | default | Controls the padding and typography size。 |
| disabled | boolean | false | Marks the action as unavailable and prevents pointer / tap。 |
| loading | boolean | false | Shows a busy indicator and disables interactions。 |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
| onPress | event | - | Callback that fires when the user clicks / taps the button。 |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| icon-left | slot | - | Optional leading icon rendered before the label。 |
| default* | slot | - | The button label content，默认渲染 `label` prop。 |
| icon-right | slot | - | Optional trailing icon rendered after the label。 |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The button element itself |
| label | part | - | The text label inside the button |
| icon | part | - | Optional icon element |
Variants
variantdefault: default
Visual intent of the button。
defaultdestructiveoutlinesecondaryghostlink
sizedefault: default
Available control sizes。
defaultsmlgicon
Interaction States
press
Button reacts to tap / click with hover + active states。
defaulthoveractivedisabledloading
This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.
Extended notes are not available for this component yet.
On This Page
- Installation
- Usage
- Examples
- Button · Basic button
- Button · Disabled State
- Button · Rounded button
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · Low emphasis variant
- Button · With icon
- Button · Loading state
- Button · Outlined variant
- Button · With icon
- Button · Rounded button
- Button · With icon
- Button · With icon
- Button · Rounded button
- Button · Rounded button
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · Rounded button
- Button · Rounded button
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · Outlined variant
- Button · Outlined variant
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · Rounded button
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · With icon
- Button · Rounded button
- Button · With icon
- Button · Talent Agency
- Button · With icon
- Button · With icon
- Button · With icon
- API Reference