# Component/Button/TextButton

> Props: component-button-textbutton.props.txt

## Examples


### As Child

```tsx
{
  render: () => {
    return <Stack direction='column' gap={12} align='flex-start'>
        <TextButton kind='link' startIcon={<IconCircleInfoFill />} asChild>
          <a href='https://partners.kakaostyle.com' target='_blank' rel='noreferrer'>
            https://partners.kakaostyle.com/
          </a>
        </TextButton>
        <TextButton kind='link' startIcon={<IconCircleInfoFill />} asChild underline>
          <a href='https://partners.kakaostyle.com' target='_blank' rel='noreferrer'>
            with underline: https://partners.kakaostyle.com/
          </a>
        </TextButton>
      </Stack>;
  }
}
```

### Combination

```tsx
{
  render: () => <Stack direction='column' gap={12}>
      <Stack direction='row' gap={20} align='center'>
        <TextButton kind='link'>Label</TextButton>
        <TextButton kind='link' underline>
          Label
        </TextButton>
        <TextButton kind='link' underline startIcon={<IconPlus />}>
          Label
        </TextButton>
        <TextButton kind='link' underline disabled startIcon={<IconPlus />}>
          Label
        </TextButton>
      </Stack>
      <Stack direction='row' gap={12} align='center'>
        <TextButton color={semantic_colors.state.positive}>Label</TextButton>
        <TextButton color={semantic_colors.state.positive} underline>
          Label
        </TextButton>
        <TextButton color={semantic_colors.brand.primary}>Label</TextButton>
        <TextButton color={semantic_colors.brand.primary} underline>
          Label
        </TextButton>
      </Stack>
      <Stack direction='row' gap={12} align='center'>
        <TextButton underline startIcon={<IconCircleInfoFill color={semantic_colors.accent.primary} size={20} />}>
          Label
        </TextButton>
        <TextButton underline disabled startIcon={<IconCircleInfoFill color={semantic_colors.accent.primary} size={20} />}>
          Label
        </TextButton>
        <TextButton startIcon={<IconLinkExternal color={semantic_colors.accent.primary} size={14} />}>Label</TextButton>
        <TextButton disabled startIcon={<IconLinkExternal color={semantic_colors.accent.primary} size={14} />}>
          Label
        </TextButton>
      </Stack>
      <Stack direction='row' gap={12} align='center'>
        <TextButton kind='link' color={colors.gray550}>
          Label
        </TextButton>
        <TextButton kind='link' color={colors.gray550} underline>
          Label
        </TextButton>
        <TextButton kind='link' color={colors.gray550} disabled>
          Label
        </TextButton>
        <TextButton kind='link' color={colors.orange500}>
          Label
        </TextButton>
        <TextButton kind='link' color={colors.orange500} startIcon={<IconCircleInfoFill />}>
          Label
        </TextButton>
        <TextButton kind='link' color={colors.orange500} startIcon={<IconCircleInfoFill />} disabled>
          Label
        </TextButton>
      </Stack>
      <Stack direction='row' gap={12} align='center'>
        <TextButton kind='link' color={'inherit'}>
          InheritColor
        </TextButton>
        <TextButton kind='link' color={'inherit'} startIcon={<IconCircleInfoFill />}>
          InheritColor
        </TextButton>
        <TextButton kind='link' color={'inherit'} startIcon={<IconCircleInfoFill />} disabled>
          InheritColor
        </TextButton>
        <TextButton kind='link' color={'currentColor'}>
          currentColor
        </TextButton>
        <TextButton kind='link' color={'currentColor'} startIcon={<IconCircleInfoFill />}>
          currentColor
        </TextButton>
        <TextButton kind='link' color={'currentColor'} startIcon={<IconCircleInfoFill />} disabled>
          currentColor
        </TextButton>
      </Stack>
      <Stack direction='row' gap={12} align='center'>
        <TextButton kind='link' color={'pink'}>
          pinkColor
        </TextButton>
        <TextButton kind='link' color={'pink'} startIcon={<IconCircleInfoFill />}>
          pinkColor
        </TextButton>
        <TextButton kind='link' color={'pink'} startIcon={<IconCircleInfoFill />} disabled>
          pinkColor
        </TextButton>
      </Stack>
    </Stack>
}
```

### End Icon

```tsx
{
  args: {
    children: 'Label',
    onClick: () => alert('clicked')
  },
  render: args => {
    const button_size_keys = reverse(Object.keys(text_button_size_css));
    return <Stack direction='row' gap={12} align='center'>
        <Stack direction='column' gap={16} p={20} align='center'>
          <TextButton {...args} />
          <TextButton {...args} disabled />
        </Stack>
        <Stack direction='column' gap={16} p={20} align='center' style={{
        backgroundColor: colors.gray30
      }}>
          <Stack direction='row' gap={24} align='center'>
            {button_size_keys.map(key => <TextButton {...args} size={key as TextButtonSize} key={key} />)}
          </Stack>
          <Stack direction='row' gap={24} align='center'>
            {button_size_keys.map(key => <TextButton {...args} size={key as TextButtonSize} key={key} disabled />)}
          </Stack>
        </Stack>
      </Stack>;
  },
  args: {
    children: 'Label',
    endIcon: <IconRefresh size={14} />,
    onClick: () => alert('clicked')
  }
}
```

### Link

```tsx
{
  args: {
    children: 'Label',
    onClick: () => alert('clicked')
  },
  render: args => {
    const button_size_keys = reverse(Object.keys(text_button_size_css));
    return <Stack direction='row' gap={12} align='center'>
        <Stack direction='column' gap={16} p={20} align='center'>
          <TextButton {...args} />
          <TextButton {...args} disabled />
        </Stack>
        <Stack direction='column' gap={16} p={20} align='center' style={{
        backgroundColor: colors.gray30
      }}>
          <Stack direction='row' gap={24} align='center'>
            {button_size_keys.map(key => <TextButton {...args} size={key as TextButtonSize} key={key} />)}
          </Stack>
          <Stack direction='row' gap={24} align='center'>
            {button_size_keys.map(key => <TextButton {...args} size={key as TextButtonSize} key={key} disabled />)}
          </Stack>
        </Stack>
      </Stack>;
  },
  args: {
    kind: 'link',
    children: 'Label',
    onClick: () => alert('clicked')
  }
}
```

### Link Underline

```tsx
{
  args: {
    children: 'Label',
    onClick: () => alert('clicked')
  },
  render: args => {
    const button_size_keys = reverse(Object.keys(text_button_size_css));
    return <Stack direction='row' gap={12} align='center'>
        <Stack direction='column' gap={16} p={20} align='center'>
          <TextButton {...args} />
          <TextButton {...args} disabled />
        </Stack>
        <Stack direction='column' gap={16} p={20} align='center' style={{
        backgroundColor: colors.gray30
      }}>
          <Stack direction='row' gap={24} align='center'>
            {button_size_keys.map(key => <TextButton {...args} size={key as TextButtonSize} key={key} />)}
          </Stack>
          <Stack direction='row' gap={24} align='center'>
            {button_size_keys.map(key => <TextButton {...args} size={key as TextButtonSize} key={key} disabled />)}
          </Stack>
        </Stack>
      </Stack>;
  },
  args: {
    kind: 'link',
    children: 'Label',
    underline: true,
    onClick: () => alert('clicked')
  }
}
```

### Loading

```tsx
{
  render: args => {
    const button_size_keys = reverse(Object.keys(text_button_size_css));
    return <Stack direction='column' gap={16}>
        <Stack direction='column' gap={4}>
          <BaseText>No Icon</BaseText>
          <Stack direction='row' gap={12} align='center'>
            <Stack direction='column' gap={16} p={20} align='center'>
              <TextButton {...args} />
              <TextButton {...args} disabled />
            </Stack>
            <Stack direction='column' gap={16} p={20} align='center' style={{
            backgroundColor: colors.gray300
          }}>
              <Stack direction='row' gap={24} align='center'>
                {button_size_keys.map(key => <TextButton {...args} size={key as TextButtonSize} key={key} />)}
              </Stack>
              <Stack direction='row' gap={24} align='center'>
                {button_size_keys.map(key => <TextButton {...args} size={key as TextButtonSize} key={key} disabled />)}
              </Stack>
            </Stack>
          </Stack>
        </Stack>
        <Stack direction='column' gap={4}>
          <BaseText>start Icon</BaseText>
          <Stack direction='row' gap={12} align='center'>
            <Stack direction='column' gap={16} p={20} align='center'>
              <TextButton startIcon={<IconCircleInfoFill />} {...args} />
              <TextButton startIcon={<IconCircleInfoFill />} {...args} disabled />
            </Stack>
            <Stack direction='column' gap={16} p={20} align='center' style={{
            backgroundColor: colors.gray300
          }}>
              <Stack direction='row' gap={24} align='center'>
                {button_size_keys.map(key => <TextButton startIcon={<IconCircleInfoFill />} {...args} size={key as TextButtonSize} key={key} />)}
              </Stack>
              <Stack direction='row' gap={24} align='center'>
                {button_size_keys.map(key => <TextButton startIcon={<IconCircleInfoFill />} {...args} size={key as TextButtonSize} key={key} disabled />)}
              </Stack>
            </Stack>
          </Stack>
        </Stack>
        <Stack direction='column' gap={4}>
          <BaseText>End Icon</BaseText>
          <Stack direction='row' gap={12} align='center'>
            <Stack direction='column' gap={16} p={20} align='center'>
              <TextButton endIcon={<IconCircleInfoFill />} {...args} />
              <TextButton endIcon={<IconCircleInfoFill />} {...args} disabled />
            </Stack>
            <Stack direction='column' gap={16} p={20} align='center' style={{
            backgroundColor: colors.gray300
          }}>
              <Stack direction='row' gap={24} align='center'>
                {button_size_keys.map(key => <TextButton endIcon={<IconCircleInfoFill />} {...args} size={key as TextButtonSize} key={key} />)}
              </Stack>
              <Stack direction='row' gap={24} align='center'>
                {button_size_keys.map(key => <TextButton endIcon={<IconCircleInfoFill />} {...args} size={key as TextButtonSize} key={key} disabled />)}
              </Stack>
            </Stack>
          </Stack>
        </Stack>
        <Stack direction='column' gap={4}>
          <BaseText>start/end Icon</BaseText>
          <Stack direction='row' gap={12} align='center'>
            <Stack direction='column' gap={16} p={20} align='center'>
              <TextButton startIcon={<IconCircleInfoFill />} endIcon={<IconCircleInfoFill />} {...args} />
              <TextButton startIcon={<IconCircleInfoFill />} endIcon={<IconCircleInfoFill />} {...args} disabled />
            </Stack>
            <Stack direction='column' gap={16} p={20} align='center' style={{
            backgroundColor: colors.gray300
          }}>
              <Stack direction='row' gap={24} align='center'>
                {button_size_keys.map(key => <TextButton startIcon={<IconCircleInfoFill />} endIcon={<IconCircleInfoFill />} {...args} size={key as TextButtonSize} key={key} />)}
              </Stack>
              <Stack direction='row' gap={24} align='center'>
                {button_size_keys.map(key => <TextButton startIcon={<IconCircleInfoFill />} endIcon={<IconCircleInfoFill />} {...args} size={key as TextButtonSize} key={key} disabled />)}
              </Stack>
            </Stack>
          </Stack>
        </Stack>
      </Stack>;
  },
  args: {
    children: '버튼',
    kind: 'link',
    underline: true,
    loading: true
  }
}
```

### Start Icon

```tsx
{
  args: {
    children: 'Label',
    onClick: () => alert('clicked')
  },
  render: args => {
    const button_size_keys = reverse(Object.keys(text_button_size_css));
    return <Stack direction='row' gap={12} align='center'>
        <Stack direction='column' gap={16} p={20} align='center'>
          <TextButton {...args} />
          <TextButton {...args} disabled />
        </Stack>
        <Stack direction='column' gap={16} p={20} align='center' style={{
        backgroundColor: colors.gray30
      }}>
          <Stack direction='row' gap={24} align='center'>
            {button_size_keys.map(key => <TextButton {...args} size={key as TextButtonSize} key={key} />)}
          </Stack>
          <Stack direction='row' gap={24} align='center'>
            {button_size_keys.map(key => <TextButton {...args} size={key as TextButtonSize} key={key} disabled />)}
          </Stack>
        </Stack>
      </Stack>;
  },
  args: {
    children: 'Label',
    startIcon: <IconRefresh size={14} />,
    onClick: () => alert('clicked')
  }
}
```

### Text

```tsx
{
  args: {
    children: 'Label',
    onClick: () => alert('clicked')
  },
  render: args => {
    const button_size_keys = reverse(Object.keys(text_button_size_css));
    return <Stack direction='row' gap={12} align='center'>
        <Stack direction='column' gap={16} p={20} align='center'>
          <TextButton {...args} />
          <TextButton {...args} disabled />
        </Stack>
        <Stack direction='column' gap={16} p={20} align='center' style={{
        backgroundColor: colors.gray30
      }}>
          <Stack direction='row' gap={24} align='center'>
            {button_size_keys.map(key => <TextButton {...args} size={key as TextButtonSize} key={key} />)}
          </Stack>
          <Stack direction='row' gap={24} align='center'>
            {button_size_keys.map(key => <TextButton {...args} size={key as TextButtonSize} key={key} disabled />)}
          </Stack>
        </Stack>
      </Stack>;
  }
}
```

### Text Underline

```tsx
{
  args: {
    children: 'Label',
    onClick: () => alert('clicked')
  },
  render: args => {
    const button_size_keys = reverse(Object.keys(text_button_size_css));
    return <Stack direction='row' gap={12} align='center'>
        <Stack direction='column' gap={16} p={20} align='center'>
          <TextButton {...args} />
          <TextButton {...args} disabled />
        </Stack>
        <Stack direction='column' gap={16} p={20} align='center' style={{
        backgroundColor: colors.gray30
      }}>
          <Stack direction='row' gap={24} align='center'>
            {button_size_keys.map(key => <TextButton {...args} size={key as TextButtonSize} key={key} />)}
          </Stack>
          <Stack direction='row' gap={24} align='center'>
            {button_size_keys.map(key => <TextButton {...args} size={key as TextButtonSize} key={key} disabled />)}
          </Stack>
        </Stack>
      </Stack>;
  },
  args: {
    children: 'Label',
    underline: true,
    onClick: () => alert('clicked')
  }
}
```