Skip to main content

sesamy-logout

Usage​

Basic usage​

Place the sesamy-logout element and load the script. The logout text w/icon will be rendered with the default styling and with the message "Log out" when the user is logged in. Once the user is logged out the element will be removed.

<html>
  <body>
    <sesamy-logout></sesamy-logout>

    <script
      type="module"
      src="https://assets.sesamy.com/scripts/web-components/sesamy-logout.min.js"
    ></script>
  </body>
</html>

Passing custom attributes​

Text​

The content of the text can be replaced with the text attribute.

<html>
  <head></head>
  <body>
    <sesamy-logout text="Exit here!"></sesamy-logout>

    <script
      type="module"
      src="https://assets.sesamy.com/scripts/web-components/sesamy-logout.min.js"
    ></script>
  </body>
</html>

Hide the icon​

You can pass the hide-icon to hide the icon of the logout button.

<html>
  <head></head>
  <body>
    <sesamy-logout hide-icon text="Exit here!"></sesamy-logout>

    <script
      type="module"
      src="https://assets.sesamy.com/scripts/web-components/sesamy-logout.min.js"
    ></script>
  </body>
</html>

Return To​

By specifying a return-to attribute it is possible to set the page that the user will be redirected to after signing out. If this attribute is not set the user will be redirected to the current page.

<html>
  <head></head>
  <body>
    <sesamy-logout return-to="/"></sesamy-logout>

    <script
      type="module"
      src="https://assets.sesamy.com/scripts/web-components/sesamy-logout.min.js"
    ></script>
  </body>
</html>

Styling​

The sesamy-logout element is packaged with base styles, which can be adjusted by modifying CSS custom properties.

The list of CSS custom properties are (the value set is the default value, if the property is not presented it will take that value):

<style>
  sesamy-logout {
    --color: #f3f3f3; // Button font + icon color
    --font-family: "Helvetica"; // Button font family
    --font-size: 14px; // Button font size
    --font-weight: 400; // Button font weight
    --button-margin: 0 12px; // Button margin
    --button-padding: 0 6px; // Button padding
    --text-margin: 13px 0; // Text margin
  }
</style>