---

title: SearchButton

---

# SearchButton

This component renders a button to submit the query.

## Slots

| Name                 | Description                                      | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------------ | ----------------------------------------- |
| <code>default</code> | _Required_. Button content (text, icon, or both) | None                                      |

## Events

This component emits the following events:

- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
- [`UserPressedSearchButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)

<!-- prettier-ignore-start -->
:::warning
Note that no events are emitted if the query is empty.
:::
<!-- prettier-ignore-end -->

## Dynamic classes

`SearchButton` uses the `x-search-button--has-empty-query` dynamic CSS class to modify the HTML
button style when the query is empty.

## See it in action

In this example, a clickable button is rendered.

_Click the Search button to try it out!_

```vue live
<template>
  <SearchButton />
</template>

<script setup>
import { SearchButton } from "@empathyco/x-components/search-box";
</script>
```

### Play with default slot

Here text is passed in the default slot instead of an icon to customize the button content.

_Click the icon button to try it out!_

```vue live
<template>
  <SearchButton>Search</SearchButton>
</template>

<script setup>
import { SearchButton } from "@empathyco/x-components/search-box";
</script>
```

### Play with events

In this example, the `UserPressedSearchButton` event has been implemented so that when you enter a
search term and click the Search button, the search term is displayed as a message.

_Type any term in the input field and then click the Search button to try it out!_

```vue live
<template>
  <div>
    <div style="display: flex;">
      <SearchInput />
      <SearchButton
        @UserPressedSearchButton="
          (query) => {
            message = query;
          }
        "
      />
    </div>
    {{ message }}
  </div>
</template>

<script setup>
import { SearchInput, SearchButton } from "@empathyco/x-components/search-box";
import { ref } from "vue";

const message = ref("");
</script>
```

## Extending the component

Components can be combined and communicate with each other. Commonly, the `SearchButton` component
communicates with the [`SearchInput`](./search-input.md) to submit the query. In this example, when
you enter a search term and click the Search button, the “Looking for results” message is displayed.

_Type any term in the input field and then click the Search button to try it out!_

```vue live
<template>
  <div>
    <div style="display: flex;">
      <SearchInput />
      <SearchButton
        @UserAcceptedAQuery="
          () => {
            message = 'looking for results';
          }
        "
        >Search</SearchButton
      >
    </div>
    {{ message }}
  </div>
</template>

<script setup>
import { SearchButton, SearchInput } from "@empathyco/x-components/search-box";
import { ref } from "vue";

const message = ref("");
</script>
```