# {{d-button}} or \<DButton\>? That is the question

**URL:** https://meta.discourse.org/t/d-button-or-dbutton-that-is-the-question/295526
**Category:** Development
**Created:** [February 15, 2024, 7:21pm UTC](https://meta.discourse.org/t/d-button-or-dbutton-that-is-the-question/295526 "2024-02-15T19:21:12Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [February 15, 2024, 7:21pm UTC](https://meta.discourse.org/t/d-button-or-dbutton-that-is-the-question/295526/1 "2024-02-15T19:21:13Z")

</div>

Continuing the discussion from [DButton no longer supports @action as a string. Please refactor to use an closure action instead](https://meta.discourse.org/t/dbutton-no-longer-supports-action-as-a-string-please-refactor-to-use-an-closure-action-instead/264377/2):

> [@DButton no longer supports @action as a string. Please refactor to use an closure action instead](https://meta.discourse.org/t/dbutton-no-longer-supports-action-as-a-string-please-refactor-to-use-an-closure-action-instead/264377/2):
>
> But essentially, the message you’re seeing means that you need to change something like
> 
> ```plaintext
> {{d-button action="blah"}}
> 
> ```
> 
> to something like:
> 
> ```plaintext
> {{d-button action=(action "blah")}}
> 
> ```

This saved me!

My question now (besides how did it take me 9 months to do this) is whether/when to use `{{d-button}}` vs `<DButton>`

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [February 15, 2024, 7:22pm UTC](https://meta.discourse.org/t/d-button-or-dbutton-that-is-the-question/295526/2 "2024-02-15T19:22:46Z")

</div>

The modern ember pattern is to use ‘angle bracket’ syntax to invoke components. So `<DButton>` is preferred.

We lint for this in core, but haven’t yet extended it to themes/plugins.

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [February 15, 2024, 7:30pm UTC](https://meta.discourse.org/t/d-button-or-dbutton-that-is-the-question/295526/3 "2024-02-15T19:30:07Z")

</div>

> [@david](#):
>
> The modern ember pattern is to use ‘angle bracket’ syntax to invoke components. So `<DButton>` is preferred.

Oh. Hooray. That’s what I thought!

It was especially confusing since the error message compained about `<DButton>` but I am using `{{d-button}}`. I’ll go about fixing those Real Soon Now.

> [@david](#):
>
> We lint for this in core, but haven’t yet extended it to themes/plugins.

Aha. Thanks for the explanation.

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [February 15, 2024, 10:06pm UTC](https://meta.discourse.org/t/d-button-or-dbutton-that-is-the-question/295526/4 "2024-02-15T22:06:42Z")

</div>

Wait. So we gave up `@actionParam` in `<DButton>` and do this to pass stuff:

```plaintext
        @action={{fn this.addExtraVars this.extraVarsSmtp}}

```

but in `<NavItem>` we still stil have this to pass parameters to a route

```plaintext
            @route="pfaffmanager.servers.show"
            @routeParam={{server.id}}

```

---

<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: [February 15, 2024, 10:23pm UTC](https://meta.discourse.org/t/d-button-or-dbutton-that-is-the-question/295526/5 "2024-02-15T22:23:21Z")

</div>

It’s a particular case here.

`<NavItem>` calls `<LinkTo>` that requires the name of the route to link to (`route`) and the value to fill the dynamic segment (`model,` an ID here) to be separate.

```js
<LinkTo
    @route={{@route}}
    @model={{@routeParam}}
  >{{this.contents}}
</LinkTo>

```

Does that make sense?

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [February 16, 2024, 7:47pm UTC](https://meta.discourse.org/t/d-button-or-dbutton-that-is-the-question/295526/6 "2024-02-16T19:47:40Z")

</div>

It’s a fine explanation and I do understand it, but I wouldn’t say it makes **sense**. 🙂

---

<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: [February 16, 2024, 8:12pm UTC](https://meta.discourse.org/t/d-button-or-dbutton-that-is-the-question/295526/7 "2024-02-16T20:12:59Z")

</div>

It makes sense because there is no function/action involved here (and it’s not needed) in `NavItem.` You only want to pass parameters from component to component. You see what I mean? Sorry, I’m so bad at explaining things. 😅

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [March 17, 2024, 8:13pm UTC](https://meta.discourse.org/t/d-button-or-dbutton-that-is-the-question/295526/8 "2024-03-17T20:13:32Z")

</div>

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