# Component/Button/TextButton
> Props: component-button-textbutton.props.txt
## Examples
### As Child
```tsx
{
render: () => {
return
} asChild>
https://partners.kakaostyle.com/
} asChild underline>
with underline: https://partners.kakaostyle.com/
;
}
}
```
### Combination
```tsx
{
render: () =>
Label
Label
}>
Label
}>
Label
Label
Label
Label
Label
}>
Label
}>
Label
}>Label
}>
Label
Label
Label
Label
Label
}>
Label
} disabled>
Label
InheritColor
}>
InheritColor
} disabled>
InheritColor
currentColor
}>
currentColor
} disabled>
currentColor
pinkColor
}>
pinkColor
} disabled>
pinkColor
}
```
### Left Icon
```tsx
{
args: {
children: 'Label',
onClick: () => alert('clicked')
},
render: args => {
const button_size_keys = reverse(Object.keys(text_button_size_css));
return
{button_size_keys.map(key => )}
{button_size_keys.map(key => )}
;
},
args: {
children: 'Label',
leftIcon: ,
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
{button_size_keys.map(key => )}
{button_size_keys.map(key => )}
;
},
args: {
variant: '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
{button_size_keys.map(key => )}
{button_size_keys.map(key => )}
;
},
args: {
variant: 'link',
children: 'Label',
underline: true,
onClick: () => alert('clicked')
}
}
```
### Loading
```tsx
{
render: args => {
const button_size_keys = reverse(Object.keys(text_button_size_css));
return
No Icon
{button_size_keys.map(key => )}
{button_size_keys.map(key => )}
start Icon
} {...args} />
} {...args} disabled />
{button_size_keys.map(key => } {...args} size={key as TextButtonSize} key={key} />)}
{button_size_keys.map(key => } {...args} size={key as TextButtonSize} key={key} disabled />)}
End Icon
} {...args} />
} {...args} disabled />
{button_size_keys.map(key => } {...args} size={key as TextButtonSize} key={key} />)}
{button_size_keys.map(key => } {...args} size={key as TextButtonSize} key={key} disabled />)}
start/end Icon
} rightIcon={} {...args} />
} rightIcon={} {...args} disabled />
{button_size_keys.map(key => } rightIcon={} {...args} size={key as TextButtonSize} key={key} />)}
{button_size_keys.map(key => } rightIcon={} {...args} size={key as TextButtonSize} key={key} disabled />)}
;
},
args: {
children: '버튼',
variant: 'link',
underline: true,
loading: true
}
}
```
### Right Icon
```tsx
{
args: {
children: 'Label',
onClick: () => alert('clicked')
},
render: args => {
const button_size_keys = reverse(Object.keys(text_button_size_css));
return
{button_size_keys.map(key => )}
{button_size_keys.map(key => )}
;
},
args: {
children: 'Label',
rightIcon: ,
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
{button_size_keys.map(key => )}
{button_size_keys.map(key => )}
;
}
}
```
### Text Underline
```tsx
{
args: {
children: 'Label',
onClick: () => alert('clicked')
},
render: args => {
const button_size_keys = reverse(Object.keys(text_button_size_css));
return
{button_size_keys.map(key => )}
{button_size_keys.map(key => )}
;
},
args: {
children: 'Label',
underline: true,
onClick: () => alert('clicked')
}
}
```