Button

작업을 수행하는데 사용되는 클릭 가능한 요소입니다. 콘텐츠 혹은 화면의 하단 영역에 배치되며 다양한 방식으로 콘텐츠와 함께 상호 작용할 수 있도록 돕습니다.

Design

Web

iOS

Android

Variants

Solid button

Primary(Default), Assistive, Negative로 구성되어있습니다. negative는 파괴적/경고성 행동에 사용하며 variant="solid"에서만 동작합니다.

import { FlexBox, Button } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox gap="12px" justifyContent="center" flexWrap="wrap">
      <Button color="primary">Primary</Button>
      <Button color="assistive">Assistive</Button>
      <Button color="negative">Negative</Button>
    </FlexBox>
  )
}

export default Demo;

Outlined button

Primary(Default), Assistive로 구성되어있습니다.

import { FlexBox, Button } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox gap="12px" justifyContent="center" flexWrap="wrap">
      <Button variant="outlined" color="primary">Primary</Button>
      <Button variant="outlined" color="assistive">Assistive</Button>
    </FlexBox>
  )
}

export default Demo;

Icon

With icon

leadingContent, trailingContent을 사용하여 아이콘과 함께 배치할 수 있습니다.
단, leading, trailingContent를 동시에 적용하는 것은 지양합니다.

import { FlexBox, Button } from '@montage-ui/core';
import { IconPlus, IconTrash } from '@montage-ui/icon';

const Demo = () => {
  return (
    <FlexBox gap="12px" justifyContent="center" flexWrap="wrap">
      <Button
        variant="solid"
        color="primary"
        leadingContent={<IconPlus />}
      >
        추가
      </Button>
      <Button
        variant="outlined"
        color="assistive"
        trailingContent={<IconTrash />}
      >
        삭제
      </Button>
    </FlexBox>
  )
}

export default Demo;

Icon only

iconOnly prop 을 사용하면 아이콘만 단독으로 배치할 수 있습니다.
다른 Solid, Outlined Button과 나란히 함께 사용할 때 iconOnly를 사용합니다.

import { FlexBox, Button } from '@montage-ui/core';
import { IconPlusThick } from '@montage-ui/icon';

const Demo = () => {
  return (
    <FlexBox gap="12px" justifyContent="center" flexWrap="wrap">
      <Button iconOnly variant="solid" color="primary">
        <IconPlusThick />
      </Button>
      <Button iconOnly variant="solid" color="assistive">
        <IconPlusThick />
      </Button>
      <Button iconOnly variant="outlined" color="primary">
        <IconPlusThick />
      </Button>
      <Button iconOnly variant="outlined" color="assistive">
        <IconPlusThick />
      </Button>
    </FlexBox>
  )
}

export default Demo;

Sizes

모든 타입의 버튼은 xsmall, small, medium(Default), large 4개의 사이즈를 제공합니다.

import { Button, FlexBox } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox gap="12px" flexDirection="column" alignItems="center">
      <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
        <Button variant="solid" color="primary" size="xsmall">
          Xsmall
        </Button>
        <Button variant="solid" color="primary" size="small">
          Small
        </Button>
        <Button variant="solid" color="primary" size="medium">
          Medium
        </Button>
        <Button variant="solid" color="primary" size="large">
          Large
        </Button>
      </FlexBox>

      <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
        <Button variant="solid" color="assistive" size="xsmall">
          Xsmall
        </Button>
        <Button variant="solid" color="assistive" size="small">
          Small
        </Button>
        <Button variant="solid" color="assistive" size="medium">
          Medium
        </Button>
        <Button variant="solid" color="assistive" size="large">
          Large
        </Button>
      </FlexBox>

      <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
        <Button variant="solid" color="negative" size="xsmall">
          Xsmall
        </Button>
        <Button variant="solid" color="negative" size="small">
          Small
        </Button>
        <Button variant="solid" color="negative" size="medium">
          Medium
        </Button>
        <Button variant="solid" color="negative" size="large">
          Large
        </Button>
      </FlexBox>

      <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
        <Button variant="outlined" color="primary" size="xsmall">
          Xsmall
        </Button>
        <Button variant="outlined" color="primary" size="small">
          Small
        </Button>
        <Button variant="outlined" color="primary" size="medium">
          Medium
        </Button>
        <Button variant="outlined" color="primary" size="large">
          Large
        </Button>
      </FlexBox>

      <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
        <Button variant="outlined" color="assistive" size="xsmall">
          Xsmall
        </Button>
        <Button variant="outlined" color="assistive" size="small">
          Small
        </Button>
        <Button variant="outlined" color="assistive" size="medium">
          Medium
        </Button>
        <Button variant="outlined" color="assistive" size="large">
          Large
        </Button>
      </FlexBox>
    </FlexBox>
  )
}

export default Demo;

Disabled

disabled 옵션을 통해 비활성화 상태를 표시합니다.

import { Button, FlexBox } from '@montage-ui/core';
import { IconBlank } from '@montage-ui/icon';

const Demo = () => {
  return (
    <FlexBox gap="12px" flexDirection="column" alignItems="center">
      <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
        <Button variant="solid" color="primary" size="large" disabled>
          Solid Primary
        </Button>
        <Button variant="solid" color="primary" size="large" disabled iconOnly>
          <IconBlank />
        </Button>
        <Button variant="solid" color="assistive" size="large" disabled>
          Solid Assistive
        </Button>
        <Button variant="solid" color="assistive" size="large" disabled iconOnly>
          <IconBlank />
        </Button>
        <Button variant="solid" color="negative" size="large" disabled>
          Solid Negative
        </Button>
        <Button variant="solid" color="negative" size="large" disabled iconOnly>
          <IconBlank />
        </Button>
      </FlexBox>

      <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
        <Button variant="outlined" color="primary" size="large" disabled>
          Outlined Primary
        </Button>
        <Button variant="outlined" color="primary" size="large" disabled iconOnly>
          <IconBlank />
        </Button>
        <Button variant="outlined" color="assistive" size="large" disabled>
          Outlined Assistive
        </Button>
        <Button variant="outlined" color="assistive" size="large" disabled iconOnly>
          <IconBlank />
        </Button>
      </FlexBox>
    </FlexBox>
  )
}

export default Demo;

Loading

loading 옵션을 통해 로딩 상태를 트리커 할 수 있습니다. disabled 상태와는 다르게 동작하며 아래 이벤트 실행을 막습니다.

onClick
onMouseDown
onPointerDown
onKeyDown (e.key === 'Enter' || e.key === ' ')

이벤트 실행을 막지 않기 위해서 disableLoadingPreventEvents 을 사용할 수 있습니다.

import { Button, FlexBox } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox gap="12px" flexDirection="column" alignItems="center">
      <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
        <Button loading variant="solid" color="primary" size="xsmall">
          Xsmall
        </Button>
        <Button loading variant="solid" color="primary" size="small">
          Small
        </Button>
        <Button loading variant="solid" color="primary" size="medium">
          Medium
        </Button>
        <Button loading variant="solid" color="primary" size="large">
          Large
        </Button>
      </FlexBox>

      <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
        <Button loading variant="solid" color="assistive" size="xsmall">
          Xsmall
        </Button>
        <Button loading variant="solid" color="assistive" size="small">
          Small
        </Button>
        <Button loading variant="solid" color="assistive" size="medium">
          Medium
        </Button>
        <Button loading variant="solid" color="assistive" size="large">
          Large
        </Button>
      </FlexBox>

      <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
        <Button loading variant="solid" color="negative" size="xsmall">
          Xsmall
        </Button>
        <Button loading variant="solid" color="negative" size="small">
          Small
        </Button>
        <Button loading variant="solid" color="negative" size="medium">
          Medium
        </Button>
        <Button loading variant="solid" color="negative" size="large">
          Large
        </Button>
      </FlexBox>

      <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
        <Button loading variant="outlined" color="primary" size="xsmall">
          Xsmall
        </Button>
        <Button loading variant="outlined" color="primary" size="small">
          Small
        </Button>
        <Button loading variant="outlined" color="primary" size="medium">
          Medium
        </Button>
        <Button loading variant="outlined" color="primary" size="large">
          Large
        </Button>
      </FlexBox>

      <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
        <Button loading variant="outlined" color="assistive" size="xsmall">
          Xsmall
        </Button>
        <Button loading variant="outlined" color="assistive" size="small">
          Small
        </Button>
        <Button loading variant="outlined" color="assistive" size="medium">
          Medium
        </Button>
        <Button loading variant="outlined" color="assistive" size="large">
          Large
        </Button>
      </FlexBox>
    </FlexBox>
  )
}

export default Demo;

API

as 옵션을 통해 Link 등 다른 컴포넌트/태그로 활용할 수 있습니다.

정해진 breakpoint에 따라 아래 옵션을 override 할 수 있습니다.

size

Name	Types	defaultValue
`as`	`ElementType`	`-`
`size`	`"small" \| "medium" \| "large" \| "xsmall"`	`-`
`disabled`	`boolean`	`false`
`disableInteraction`	`boolean`	`false`
`variant`	`"solid" \| "outlined"`	`"solid"`
`color`	`"negative" \| "primary" \| "assistive"`	`"primary"`
`fullWidth`	`boolean`	`false`
`leadingContent`	`ReactNode`	`-`
`trailingContent`	`ReactNode`	`-`
`iconOnly`	`boolean`	`-`
`children`	`ReactNode`	`-`
`loading`	`boolean`	`false`
`disableLoadingPreventEvents`	`boolean`	`-`
`sx`	`SxProp`	`-`
`xl`	`Merge<Pick<ButtonDefaultProps, "size" \| "fullWidth">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`lg`	`Merge<Pick<ButtonDefaultProps, "size" \| "fullWidth">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`md`	`Merge<Pick<ButtonDefaultProps, "size" \| "fullWidth">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`sm`	`Merge<Pick<ButtonDefaultProps, "size" \| "fullWidth">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`xs`	`Merge<Pick<ButtonDefaultProps, "size" \| "fullWidth">, { sx?: CSSInterpolation; }> \| undefined`	`-`