API Reference / Vue InstantSearch / ais-powered-by

ais-powered-by

A
Signature 
<ais-powered-by
  // Optional parameters
  theme="string"
  :class-names="object"
/>
See code examples
See live example

About this widget # A

The ais-powered-by widget is used to display the Algolia logo to redirect to our website.

Algolia requires that you use this widget if you only use your free usage credits, or are on a Community or Free legacy plan.

Examples # A

Copy 
1

<ais-powered-by />

Props # A

theme #
type: string ("dark"|"light")
default: light
Optional

The version of the logo to use, legible on light or dark backgrounds.
Copy 
1

<ais-powered-by theme="dark" />
class-names #
type: object
default: {}
Optional

The CSS classes to override.

  • ais-PoweredBy: the root of the widget.
  • ais-PoweredBy--light: the root of the widget with the light theme.
  • ais-PoweredBy--dark: the root of the widget with the dark theme.
  • ais-PoweredBy-link: the link of the widget.
  • ais-PoweredBy-logo: the illustration of the widget.
Copy 
1
2
3
4
5
6
7

<ais-powered-by
  :class-names="{
    'ais-PoweredBy': 'MyCustomPoweredBy',
    'ais-PoweredBy--light': 'MyCustomPoweredByLight',
    // ...
  }"
/>

HTML output# A

Copy 
1
2
3
4
5
6

<div class="ais-PoweredBy">
   <span class="ais-PoweredBy-text">Search by</span>
   <a href="..." class="ais-PoweredBy-link" aria-label="Algolia">
      <!-- <svg> ... </svg> -->
   </a>
</div>
Did you find this page helpful?
Vue InstantSearch v4