---
# System prepended metadata

title: SearchButton
tags: [UI reference]

---

---
title: SearchButton
tags: UI reference
---

# SearchButton

> This component renders a button to submit the query without focusing on the search input. 

If query is not empty, it emits {@link XEventsTypes.UserAcceptedAQuery} and {@link SearchBoxXEvents.UserPressedSearchButton} events with the query as payload.
It also adds `x-search-button--has-empty-query` as class when there is no query.

## Props

None

## Methods

None

## Slots

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

## Events
This component emits the following events:

* `UserPressedSearchButton` 
* `UserAcceptedAQuery`


:::warning
Note that no events are emitted if the query is empty.
:::

## Dynamic classes

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

## See it in action
:::warning Backend service required
To use this component, the Search service must be implemented. 
:::

In this example, a clickable button is rendered.

_Click the Search button to try it out!_

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

### Play with default slot

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

_Click the icon button to try it out!_

```vue live
<SearchButton>
  <img src="/assets/icons/glass-light.svg" />
</SearchButton>
```

### 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
<SearchInput  />
<SearchButton @UserPressedSearchButton="(query) => message = query">
Search
</SearchButton>
```

## 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
<SearchInput />
<SearchButton
  @UserAcceptedAQuery="message = 'looking for results'"
> Search </SearchButton>
```
