# Top Menu Logout Button Theme Component

**URL:** <https://meta.discourse.org/t/top-menu-logout-button-theme-component/308492>\
**Category:** Development\
**Created:** [May 17, 2024, 10:35pm UTC](https://meta.discourse.org/t/top-menu-logout-button-theme-component/308492 "2024-05-17T22:35:15Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [May 18, 2024, 3:12am UTC](https://meta.discourse.org/t/top-menu-logout-button-theme-component/308492/2 "2024-05-18T03:12:30Z")

</div>

Something like that. Feel free to adjust to your needs.

```js
import DButton from "discourse/components/d-button";
import routeAction from "discourse/helpers/route-action";
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("1.28.0", (api) => {
  if (api.getCurrentUser()) {
    api.headerIcons.add(
      "logout",
      <template>
        <li class="logout">
          <DButton
            @action={{routeAction "logout"}}
            class="btn-flat icon"
            @icon="sign-out-alt"
            @title="user.log_out"
            @label="user.log_out"
          />
        </li>
      </template>,
      { before: "auth" }
    );
  }
});

```

```css
.d-header-icons .logout {
  margin-left: 1em;

  button.icon {
    width: auto;

    padding-left: 0.5em;
    padding-right: 0.5em;

    svg {
      margin-right: 0.2em;
      width: 1em;
    }
  }
}

```

![image](https://global.discourse-cdn.com/meta/original/4X/1/d/4/1d416d14dcd710b382a437b54b67a14ecdb61340.png)

---

_[View the full topic](https://meta.discourse.org/t/top-menu-logout-button-theme-component/308492)._