Action area

모달 혹은 화면 하단 영역에서 메인, 대체, 보조 행동을 할 수 있는 다양한 레벨의 버튼 묶음을 제공합니다.

Variants

ActionArea 은 4가지 variant 를 사용할 수 있습니다.

  • strong (default)
  • neutral
  • compact
  • cancel

Strong

Strong variant는 세로로 버튼을 크게 배치합니다.

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

const Demo = () => {
  return (
    <FlexBox flexDirection="column" gap="12px" sx={{ width: '100%' }}>
      <ActionArea variant="strong">
        <ActionAreaButton variant="main">Main</ActionAreaButton>
        <ActionAreaButton variant="alternative">Alternative</ActionAreaButton>
        <ActionAreaButton variant="sub">Sub</ActionAreaButton>
      </ActionArea>
    </FlexBox>
  )
}

export default Demo;

Neutral

Neutral variant는 가로로 버튼을 최대 영역만큼 배치합니다.

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

const Demo = () => {
  return (
    <FlexBox flexDirection="column" gap="12px" sx={{ width: '100%' }}>
      <ActionArea variant="neutral">
        <ActionAreaButton variant="alternative">Alternative</ActionAreaButton>
        <ActionAreaButton variant="main">Main</ActionAreaButton>
      </ActionArea>

      <ActionArea variant="neutral">
        <ActionAreaButton variant="sub">Sub</ActionAreaButton>
        <ActionAreaButton variant="main">Main</ActionAreaButton>
      </ActionArea>
    </FlexBox>
  )
}

export default Demo;

Cancel

Cancel variant는 하나의 Main 버튼을 배치합니다.

import { ActionArea, ActionAreaButton } from '@montage-ui/core';

const Demo = () => {
  return (
    <ActionArea variant="cancel">
      <ActionAreaButton variant="main">Main</ActionAreaButton>
    </ActionArea>
  )
}

export default Demo;

Compact

Compact variant는 가로로 우측에 배치합니다.

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

const Demo = () => {
  return (
    <FlexBox flexDirection="column" gap="12px" sx={{ width: '100%' }}>
      <ActionArea variant="compact">
        <ActionAreaButton variant="alternative">Alternative</ActionAreaButton>
        <ActionAreaButton variant="main">Main</ActionAreaButton>
      </ActionArea>

      <ActionArea variant="compact">
        <ActionAreaButton variant="sub">Sub</ActionAreaButton>
        <ActionAreaButton variant="main">Main</ActionAreaButton>
      </ActionArea>
    </FlexBox>
  )
}

export default Demo;

compact variant에서 compactContent prop 을 통해 버튼 좌측에 컨텐츠를 배치할 수 있습니다.

import { ActionArea, ActionAreaButton, FormControl, FormControlField, FormControlLabel, Checkbox } from '@montage-ui/core';

const Demo = () => {
  return (
    <ActionArea
      variant="compact"
      compactContent={(
        <FormControl flexDirection="row">
          <FormControlField>
            <Checkbox />
          </FormControlField>
          <FormControlLabel sx={{ paddingBlock: '1px' }}>약관에 동의합니다.</FormControlLabel>
        </FormControl>
      )}
    >
      <ActionAreaButton variant="main">Main</ActionAreaButton>
    </ActionArea>
  )
}

export default Demo;

Anatomy

아래와 같은 구조로 조합하여 사용합니다.

<ActionArea>
  <ActionAreaButton variant="main">Main</ActionAreaButton>
  <ActionAreaButton variant="alternative">Alternative</ActionAreaButton>
  <ActionAreaButton variant="sub">Sub</ActionAreaButton>
</ActionArea>

Extra action area

extra 옵션을 활성화하여 버튼 영역과 상단 콘텐츠 영역을 명확하게 구분할 수 있습니다.

import { ActionArea, ActionAreaButton, FormControl, FormControlField, FormControlLabel, Checkbox } from '@montage-ui/core';

const Demo = () => {
  return (
    <ActionArea extra>
      <ActionAreaButton variant="main">Main</ActionAreaButton>
    </ActionArea>
  )
}

export default Demo;

With extra content

extraContent prop 을 통해 상단 영역에 콘텐츠를 배치할 수 있습니다.

import { ActionArea, ActionAreaButton, FormControl, FormControlField, FormControlLabel, Checkbox, FlexBox } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox flexDirection="column" gap="12px" sx={{ width: '100%' }}>
      <ActionArea
        extra
        extraContent={(
          <FormControl flexDirection="row" alignItems="center">
            <FormControlField>
              <Checkbox />
            </FormControlField>
            <FormControlLabel>약관에 동의합니다.</FormControlLabel>
          </FormControl>
        )}
      >
        <ActionAreaButton variant="main">Main</ActionAreaButton>
      </ActionArea>

      <ActionArea
        extra
        extraContent={(
          <FlexBox
            sx={theme => ({
              width: '100%',
              height: '64px',
              background: theme.semantic.surface.accent.violetOpaque,
              opacity: 0.08
            })}
          />
        )}
      >
        <ActionAreaButton variant="main">Main</ActionAreaButton>
      </ActionArea>
    </FlexBox>
  )
}

export default Demo;

Without divider

divider={false} prop 을 사용하면 상단 divider 를 제거할 수 있지만 권장하지 않습니다.

import { ActionArea, ActionAreaButton, FormControl, FormControlField, FormControlLabel, Checkbox } from '@montage-ui/core';

const Demo = () => {
  return (
    <ActionArea extra divider={false} sx={{ width: '100%' }}>
      <ActionAreaButton variant="main">Main</ActionAreaButton>
    </ActionArea>
  )
}

export default Demo;

Caption

caption prop 을 통해 캡션을 표시할 수 있으며 captionIcon 을 사용하여 캡션 영역에 아이콘을 추가할 수 있습니다.

variant="cancel" 에서는 사용하지 않습니다.

Strong variant, Caption
Neutral variant, Caption
Compact variant, Caption
import { ActionArea, ActionAreaButton, FlexBox } from '@montage-ui/core';
import { IconCircleInfo } from '@montage-ui/icon';

const Demo = () => {
  return (
    <FlexBox flexDirection="column" gap="12px" sx={{ width: '100%' }}>
      <ActionArea
        variant="strong"
        caption="Strong variant, Caption"
        captionIcon={<IconCircleInfo />}
      >
        <ActionAreaButton variant="main">Main</ActionAreaButton>
        <ActionAreaButton variant="alternative">Alternative</ActionAreaButton>
      </ActionArea>

      <ActionArea
        variant="neutral"
        caption="Neutral variant, Caption"
        captionIcon={<IconCircleInfo />}
      >
        <ActionAreaButton variant="alternative">Alternative</ActionAreaButton>
        <ActionAreaButton variant="main">Main</ActionAreaButton>
      </ActionArea>

      <ActionArea
        variant="compact"
        caption="Compact variant, Caption"
        captionIcon={<IconCircleInfo />}
      >
        <ActionAreaButton variant="alternative">Alternative</ActionAreaButton>
        <ActionAreaButton variant="main">Main</ActionAreaButton>
      </ActionArea>
    </FlexBox>
  )
}

export default Demo;

Background

background prop 을 이용하여 gradient 혹은 divider를 표시할 수 있습니다.

Popup, Bottom sheet 내부에서 사용할 경우 자동으로 스크롤 여부에 따라 background 옵션을 조정합니다.

backgroundColor prop 을 이용하여 배경 색을 변경할 수 있습니다.

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

const Demo = () => {
return (
  <FlexBox flexDirection="column" gap="12px" sx={{ width: '100%' }}>
    <ActionArea background>
      <ActionAreaButton variant="main">Main</ActionAreaButton>
      <ActionAreaButton variant="alternative">Alternative</ActionAreaButton>
    </ActionArea>

    <ActionArea background backgroundColor="semantic.effect.dimmer.primary">
      <ActionAreaButton variant="main">Main</ActionAreaButton>
      <ActionAreaButton variant="alternative">Alternative</ActionAreaButton>
    </ActionArea>
  </FlexBox>
)
}

export default Demo;

Customize

ActionAreaButton 의 버튼 variant를 교체할 수 있습니다.

  • buttonVariant
  • buttonColor
  • textButtonColor

내부 간격을 조정할 때는 --action-area-margin-x, --action-area-margin-y CSS Variable 을 사용합니다.

import { ActionArea, ActionAreaButton } from '@montage-ui/core';

const Demo = () => {
  return (
    <ActionArea sx={{ width: '100%' }}>
      <ActionAreaButton variant="main" buttonVariant="outlined">Main</ActionAreaButton>
      <ActionAreaButton variant="alternative" buttonColor="primary">Alternative</ActionAreaButton>
      <ActionAreaButton variant="sub" textButtonColor="primary">Sub</ActionAreaButton>
    </ActionArea>
  )
}

export default Demo;

API

ActionArea

NameTypesdefaultValue
children
ReactNode
-
variant
"strong" | "neutral" | "compact" | "cancel"
"strong"
extra
boolean
false
caption
ReactNode
-
captionIcon
ReactNode
-
extraContent
ReactNode
-
compactContent
ReactNode
-
background
boolean
-
backgroundColor
ThemeColorsToken
"semantic.surface.elevated.primary"
divider
boolean
true
sx
SxProp
-

ActionAreaButton

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

NameTypesdefaultValue
as
ElementType
-
children
ReactNode
-
leadingContent
ReactNode
-
trailingContent
ReactNode
-
variant
"main" | "sub" | "alternative"
"main"
iconOnly
boolean
-
disabled
boolean
-
textButtonColor
"primary" | "assistive"
-
buttonVariant
"solid" | "outlined"
-
buttonColor
"negative" | "primary" | "assistive"
-
loading
boolean
-
disableLoadingPreventEvents
boolean
-
sx
SxProp
-

© 2026 Wanted Lab, Inc.