전체 카탈로그
ActionButton17 props

Button

Button triggers an action when clicked. Use it for form submissions, confirmations, navigation, or any interaction that needs a clear call to action.

공식 문서 열기
live previewAction

Preview

Import

import {Button} from '@astryxdesign/core/Button';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

Button triggers an action when clicked. Use it for form submissions, confirmations, navigation, or any interaction that needs a clear call to action.

buttonbtnctasubmitactionloadingprimarysecondary

Important props

variantprimary | secondary | ghost | destructiveoptional
sizesm | md | lgoptional
typebutton | submit | resetoptional
valuestring | number | readonly string[]optional

Theming targets

astryx-button

Best practices

  • DoReserve primary for the single most important action in the view. Use secondary or ghost for everything else based on emphasis.
  • DoWrite labels that describe the action ("Save changes", "Delete account", "Send invite"), not vague labels like "OK" or "Click here".
  • DoShow a loading state for actions that take time, like saving or submitting, so the user knows it is working.
  • DoAlways provide a label for icon-only buttons so screen readers can announce what the button does. Add a tooltip for sighted users.