# Component/CopyText

> Props: component-copytext.props.txt

## Examples


### Custom Copied Message

```tsx
{
  render: (args) => {
    return (
      <Stack p={30}>
        <CopyText {...args} />
      </Stack>
    );
  },
  args: {
    text: '복사할 텍스트',
    copiedText: '클립보드에 저장됨!'
  }
}
```

### Custom Kind Color

```tsx
{
  render: (args) => {
    return (
      <Stack p={30}>
        <CopyText {...args} />
      </Stack>
    );
  },
  args: {
    text: '복사할 텍스트',
    textProps: {
      color: semantic_colors.accent.primary,
      kind: 'Body_14_Bold'
    }
  }
}
```

### Custom Tooltip Placement

```tsx
{
  render: (args) => {
    return (
      <Stack p={30}>
        <CopyText {...args} />
      </Stack>
    );
  },
  args: {
    text: '복사할 텍스트',
    tooltipProps: {
      placement: 'right'
    }
  }
}
```

### Default

```tsx
{
  render: (args) => {
    return (
      <Stack p={30}>
        <CopyText {...args} />
      </Stack>
    );
  },
  args: {
    text: '복사할 텍스트'
  }
}
```

### Disabled

```tsx
{
  render: (args) => {
    return (
      <Stack p={30}>
        <CopyText {...args} />
      </Stack>
    );
  },
  args: {
    text: '복사할 텍스트',
    disabled: true
  }
}
```

### Display Text

```tsx
{
  render: (args) => {
    return (
      <Stack p={30}>
        <CopyText {...args} />
      </Stack>
    );
  },
  args: {
    text: '주민번호 또는 개인정보 마스킹 데이터',
    displayText: '복사할 텍스트'
  }
}
```

### Other Align

```tsx
{
  render: () => {
    return <Stack direction='column' gap={4} p={30} align='flex-start'>
        <BaseText kind='Body_12_Regular'>주위에 있는 요소</BaseText>
        <CopyText text='복사할 텍스트' />
      </Stack>;
  }
}
```

### Stop Click Propagation

```tsx
{
  render: args => {
    const [parentClickCount, setParentClickCount] = React.useState(0);
    return <Stack p={30}>
        <div onClick={() => setParentClickCount(prev => prev + 1)}>
          <Stack direction='column' gap={6} align='flex-start'>
            <BaseText kind='Body_12_Regular'>부모 클릭 수: {parentClickCount}</BaseText>
            <CopyText {...args} />
          </Stack>
        </div>
      </Stack>;
  },
  args: {
    text: '복사할 텍스트'
  }
}
```