Search
Search pattern guides the assembly of behavior, combining a series of components, in a consistent and logical way.
For more details go to our component tab Search.
Filter bar
When displayed in the filter bar, the search field must always be positioned on the left.
For more details visit our Filter Pattern page.
In real time
This pattern does not need a click or key to perform the search. It is done as the term is typed.
In these cases, it is recommended to use skeletons in the structure that will display the results, thus keeping the user informed about the status of the system.
For more details visit our loading pattern page.
Empty state
If no results are found, it is recommended to use the EmptyState with an informative text and a button that allows you to perform an action to the moment.
Terms highlight
To highlight the term typed in the search result, it is possible to add a selection style to all texts - or part of them - that match the term typed in the search field.