Button

Continue

계약

Overview

Machine-readable contract from Component Spec.

component: buttonexport: Buttonversion: 1recipe: buttontokens.visual: buttonattributes: data-refineui=button

Anatomy

Part	data-refineui
root	button
icon	optional
label	required

Variants

Axis	Values
variant	primary, secondary, outline, ghost
size	sm, md, lg
layout	label, icon

States

Scope	Category	Values
component	pseudo	hover, active, focus-visible
component	component	data-state: loading
component	availability	disabled, aria-disabled, data-inactive
component	environment	forced-colors, dir, prefers-contrast
button	pseudo	hover, active, focus-visible
button	component	data-state: loading
button	availability	disabled, aria-disabled, data-inactive

Accessibility

Slot	Element	Native
button	button	true

Keyboard

Key	Action	Native
Enter	activate	true
Space	activate	true

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

토큰

Variant

Select a recipe variant — preview and Recipe → Tokens update together.

Variant

Select...󰯑

Continue

Recipe → Tokens

Slot bindings for variant="primary" — declared in button.recipe.ts.

Slot	Variant	Property	Trace	Semantic	Light → foundation	Dark → foundation	Recipe class
root	primary	background	button.primary.background	backgroundBrand	primaryBlack	primaryGray	bg-refineui-alias-background-brand
root	primary	foreground	button.primary.foreground	foregroundOnBrand	neutralWhite	neutralBlack	text-refineui-alias-foreground-inversed

Component token trace

All paths in token-trace-v2.json prefixed with button.

Trace	Semantic	Light foundation	Dark foundation	Light	Dark
button.ghost.activeBackground	backgroundPrimaryActive	neutral150	neutral800	#F0F0F0	#2A2A2A
button.ghost.activeForeground	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF
button.ghost.disabledForeground	foregroundDisabled	neutral400	neutral600	#CECECE	#6C6C6C
button.ghost.foreground	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF
button.ghost.hoverBackground	backgroundPrimaryHover	neutral100	neutral850	#F5F5F5	#222222
button.ghost.hoverForeground	foregroundPrimaryHover	neutralBlack	neutral100	#000000	#F5F5F5
button.outline.activeBorder	borderStrong	neutral450	neutral550	#BBBBBB	#8D8D8D
button.outline.border	borderDefault	neutral300	neutral650	#DBDBDB	#5B5B5B
button.outline.disabledBorder	borderDisabled	neutral250	neutral700	#E0E0E0	#404040
button.outline.disabledForeground	foregroundDisabled	neutral400	neutral600	#CECECE	#6C6C6C
button.outline.foreground	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF
button.outline.hoverBorder	borderStrong	neutral450	neutral550	#BBBBBB	#8D8D8D
button.primary.activeBackground	backgroundBrandActive	neutralBlack	primaryLightGray	#000000	#E6E6E6
button.primary.appearance.background	backgroundBrand	primaryBlack	primaryGray	#212121	#D4D4D4
button.primary.appearance.foreground	foregroundOnBrand	neutralWhite	neutralBlack	#FFFFFF	#000000
button.primary.background	backgroundBrand	primaryBlack	primaryGray	#212121	#D4D4D4
button.primary.disabledBackground	backgroundBrandDisabled	neutral150	neutral650	#F0F0F0	#5B5B5B
button.primary.disabledForeground	foregroundDisabled	neutral400	neutral600	#CECECE	#6C6C6C
button.primary.foreground	foregroundOnBrand	neutralWhite	neutralBlack	#FFFFFF	#000000
button.primary.hoverBackground	backgroundBrandHover	primaryDarkGray	primaryLightGray	#4d4d4d	#E6E6E6
button.primary.states.disabled.background	backgroundBrandDisabled	neutral150	neutral650	#F0F0F0	#5B5B5B
button.primary.states.disabled.foreground	foregroundDisabled	neutral400	neutral600	#CECECE	#6C6C6C
button.primary.states.hover.background	backgroundBrandHover	primaryDarkGray	primaryLightGray	#4d4d4d	#E6E6E6
button.primary.states.pressed.background	backgroundBrandActive	neutralBlack	primaryLightGray	#000000	#E6E6E6
button.secondary.activeBackground	backgroundSurfaceActive	neutral150	neutral700	#F0F0F0	#404040
button.secondary.background	backgroundPrimary	neutralWhite	neutral900	#FFFFFF	#1A1A1A
button.secondary.border	borderDefault	neutral300	neutral650	#DBDBDB	#5B5B5B
button.secondary.disabledBackground	backgroundSurfaceDisabled	neutral150	neutral850	#F0F0F0	#222222
button.secondary.disabledBorder	borderDisabled	neutral250	neutral700	#E0E0E0	#404040
button.secondary.disabledForeground	foregroundDisabled	neutral400	neutral600	#CECECE	#6C6C6C
button.secondary.foreground	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF
button.secondary.hoverBackground	backgroundSurfaceHover	neutral100	neutral750	#F5F5F5	#333333
button.secondary.hoverBorder	borderStrong	neutral450	neutral550	#BBBBBB	#8D8D8D

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

뷰당 기본(primary) 액션은 하나만 사용하세요. 밀집된 툴바의 보조 액션에는 ghost 또는 outline을 권장합니다.

import { Button, WebIcon } from "@refineui/react";
import { iconSizes } from "@refineui/tokens";

<Button variant="primary" size="md">
  Continue
</Button>

<Button variant="outline" disabled>
  Unavailable
</Button>

<Button variant="ghost" layout="icon" aria-label="Add">
  <WebIcon name="add" size={iconSizes.medium} color="currentColor" />
</Button>

계약 소스: packages/react/spec/components/button.json — 위의 SpecRenderer로 렌더링됩니다.