> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/gradio-app/gradio/llms.txt
> Use this file to discover all available pages before exploring further.

# ClearButton

> Clear component values with a button click

The ClearButton clears the values of specified components when clicked.

## Basic usage

```python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    text = gr.Textbox(label="Input")
    output = gr.Textbox(label="Output")
    clear = gr.ClearButton([text, output])
    
demo.launch()
```

## Constructor

<ParamField path="components" type="Component | Sequence[Component] | None" default="None">
  Component(s) to clear when button is clicked
</ParamField>

<ParamField path="value" type="str" default="'Clear'">
  Button label text
</ParamField>

<ParamField path="variant" type="Literal['primary', 'secondary', 'stop']" default="'secondary'">
  Button style variant
</ParamField>

<ParamField path="size" type="Literal['sm', 'md', 'lg']" default="'lg'">
  Button size
</ParamField>

## Methods

### add

Add components to be cleared:

```python theme={null}
clear_btn = gr.ClearButton()
clear_btn.add([component1, component2])
```

## Example

```python theme={null}
import gradio as gr

def process(text, num):
    return f"{text} - {num}"

with gr.Blocks() as demo:
    with gr.Row():
        text_input = gr.Textbox(label="Text")
        num_input = gr.Number(label="Number")
    
    output = gr.Textbox(label="Result")
    
    with gr.Row():
        submit = gr.Button("Submit")
        clear = gr.ClearButton([text_input, num_input, output])
    
    submit.click(fn=process, inputs=[text_input, num_input], outputs=output)
    
demo.launch()
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.