# Is there a way to enable a component only on mobile?

**URL:** https://meta.discourse.org/t/is-there-a-way-to-enable-a-component-only-on-mobile/394235
**Category:** Support
**Created:** [January 23, 2026, 11:04pm UTC](https://meta.discourse.org/t/is-there-a-way-to-enable-a-component-only-on-mobile/394235 "2026-01-23T23:04:26Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![hipp0](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hipp0/32/537433_2.png) [@hipp0](https://meta.discourse.org/u/hipp0)
#### Post date: [January 23, 2026, 11:04pm UTC](https://meta.discourse.org/t/is-there-a-way-to-enable-a-component-only-on-mobile/394235/1 "2026-01-23T23:04:26Z")

</div>

I want to enable this New Topic Button on the bottom right on mobile so its similar to [X.com](http://X.com) [New Topic Header Button](https://meta.discourse.org/t/new-topic-header-button/84551)

But not on desktop.

---

<div class="post-metadata">

### Author: ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [January 23, 2026, 11:11pm UTC](https://meta.discourse.org/t/is-there-a-way-to-enable-a-component-only-on-mobile/394235/2 "2026-01-23T23:11:44Z")

</div>

Discourse is moving away from the traditional desktop/mobile distinction. See [Designing for Different Devices (Viewport Size, Touch/Hover, etc.)](https://meta.discourse.org/t/designing-for-different-devices-viewport-size-touch-hover-etc/367810) which also contains tips on how to accomplish what you want.

---

<div class="post-metadata">

### Author: ![hipp0](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hipp0/32/537433_2.png) [@hipp0](https://meta.discourse.org/u/hipp0)
#### Post date: [January 23, 2026, 11:18pm UTC](https://meta.discourse.org/t/is-there-a-way-to-enable-a-component-only-on-mobile/394235/3 "2026-01-23T23:18:35Z")

</div>

I see thanks for the info.

But how would I get a component to render only for smaller devices?

I am not quite sure how to reference a component or enable it for one or the other.

---

<div class="post-metadata">

### Author: ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [January 23, 2026, 11:42pm UTC](https://meta.discourse.org/t/is-there-a-way-to-enable-a-component-only-on-mobile/394235/4 "2026-01-23T23:42:09Z")

</div>

The example is in that very topic

> [@Designing for Different Devices (Viewport Size, Touch/Hover, etc.)](https://meta.discourse.org/t/designing-for-different-devices-viewport-size-touch-hover-etc/367810/1):
>
> ```plaintext
> import Component from "@glimmer/component";
> import { service } from "@ember/service";
> 
> class MyComponent extends Component {
> @service capabilities;
> 
> <template>
> {{#if this.capabilities.viewport.lg}}
> This text will be displayed for devices larger than the lg breakpoint
> {{/if}}
> 
> {{#unless this.capabilities.viewport.sm}}
> This text will be displayed for devices smaller than the sm breakpoint
> {{/unless}}
> </template>
> }
> 
> ```

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [February 22, 2026, 11:42pm UTC](https://meta.discourse.org/t/is-there-a-way-to-enable-a-component-only-on-mobile/394235/5 "2026-02-22T23:42:15Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.