SearchButton

This component renders a button to submit the query.

Slots

Name	Description	Bindings (name - type - description)
default	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 (opens new window)

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 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!

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!

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!

Extending the component

Components can be combined and communicate with each other. Commonly, the SearchButton component communicates with the SearchInput 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!