What's the difference between passing parameter values using @ or wrapped in quotes to a component in Blazor C#?

I've been very confused about how to pass parameter values to C# Blazor components since there are several different syntaxes that are quite similar and I am unsure about when to use which.

For example, let's say there is a component

<MyButton />

that has a parameter property

[Parameter]
public string Label { get; set; }

What's the difference between

1. <MyButton Label="Some Label" />
2. <MyButton Label=@someLabel />
3. <MyButton Label="@someLabel" />
4. <MyButton Label=someLabel />
5. <MyButton @bind-Label=@someLabel />
6. <MyButton @bind-Label="@someLabel" />
7. <MyButton @Label="Some Label" />

1. Literals: These are literal string values that are passed to the component as simple, static values. This is suitable if your label basically doesn't need to change but has a fixed value instead.
2. Expressions: Expression assign some local variable (in that case someLabel to the Label property. Essentially this means that if your someLabel variable changes, the component will rerender and the button label will update accordingly. Thus the Label property has a dynamic value. This is also called One-Way Binding.
3. Quoted Expressions: There is no difference between dynamic assignments with an @ sign only or with additional quotes. Blazor allows dynamic assignments with and without quotation mark wrappers.
4. Inferred Literals: This might look like a variable assignment at first glance. However , Blazor actually infers this as a literal string since this syntax is valid in default html as well.
5. Two-Way Binding: Suppose there is a corresponding [Parameter] EventCallback<T> LabelChanged defined in MyButton this syntax Two-Way binds a variable someLabel to the component. This means that not only is someLabel dynamically assigned to the component label but also the other way around. A label is not a great use case for Two-Way-Binding but this behavior is neat indeed when working with inputs for example. <br/> P. S.: It is necessary to follow the naming convention {name of property}Changed for the EventCallback<T> in order to make the binding work correctly.
6. Quoted Two-Way Binding: Again, Blazor doesn't care whether you wrap an assignment in quotes or not. Concluding this syntax equals 5. Two-Way-Binding.
7. Directives: Directives such as @ref, @key, or @bind bring additional functionality to a component. However, Blazor does not support custom directives (yet). The Label property won't be assigned to any value (I assume null) due to invalid markup syntax.

While the description of all your 7 cases is correct, this is not the only way to categorize them.

1 Quotes

Razor is based on HTML and the recommended practice is to always use quotes around parameter values. And those quotes can be single (') or double (").
So, regardless of all other aspects, the following three notations are always the same:

a. x=y
b. x='y'
c. x="y"

The one exception here is that notation a) is only allowed when there are no spaces or other invalid chars in the value y.

2 prefix with @

The razor compiler knows the type of the parameter and will accept C# values here. The exception is with strings, ="someLabel" and =someLabel assign literal text but in ="@someLabel" it assigns the content of string someLabel.

Your examples

Cases 2) and 3) are exactly the same,

Cases 1) and 4) are the same , quotes are required for 1) because of the space.

Cases 5) and 6) are exactly the same again. And because the @ is optional here (the Razor compiler knows you can't 2-way bind to literal text), the following two are the same as 5) and 6) as well:

8. <MyButton @bind-Label='someLabel' />
9. <MyButton @bind-Label="someLabel" />

From the docs:

> Quotes around parameter attribute values are optional in most cases per the HTML5 specification. For example, Value=this is supported, instead of Value="this". However, we recommend using quotes because it's easier to remember and widely adopted across web-based technologies.

and

> If the component parameter is of type string, then the attribute value is instead treated as a C# string literal by default. If you want to specify a C# expression instead, then use the @ prefix.

> We don't recommend the use of the @ prefix for literals (for example, boolean values), keywords (for example, this), or null, but you can choose to use them if you wish. For example, IsFixed="@true" is uncommon but supported.

Seems a lot of programmers need rules to feel comfortable. The simple way to look at this is the @ breaks from html to C#. If you don't need quotes in C# don't use them. Blazor .razor files are a combination of C# and html.