---
description: Quickly set parameters to add html attribute
---

# HtmlAttribute Attribute

### Example

{% code title="Anchor.razor" %}
```cshtml
@inherits BlazorComponentBase

<a @attributes="AdditionalAttributes">@ChildContent</a>

@code{
    [Parameter]public RenderFragment? ChildContent { get; set; }
    [Parameter][HtmlAttribute]public string? Title { get; set; }
    [Parameter][HtmlAttribute("href")]public string? Link { get; set; }
    [Parameter][HtmlAttribute]public LinkTarget Target { get; set; } = LinkTarget.Blank;
    
    public enum LinkTarget
    {
        [HtmlAttrbute("_blank")]Blank,
        [HtmlAttrbute("_parent")]Parent,
        [HtmlAttrbute("_top")]Top,
    }
}
```
{% endcode %}

{% code title="Anchor.cs" %}
```csharp
public class Anchor : BlazorComponentBase, IHasChildContent
{
    [Parameter]public RenderFragment? ChildContent { get; set; }
    [Parameter][HtmlAttribute]public string? Title { get; set; }
    [Parameter][HtmlAttribute("href")]public string? Link { get; set; }
    [Parameter][HtmlAttribute]public LinkTarget Target { get; set; } = LinkTarget.Blank;
    
    public enum LinkTarget
    {
        [HtmlAttrbute("_blank")]Blank,
        [HtmlAttrbute("_parent")]Parent,
        [HtmlAttrbute("_top")]Top,
    }
}
```
{% endcode %}

{% code title="Index.razor" %}
```cshtml
<Anchor Link="https://github.com" Title="github" Target="LinkTarget.Top">Go Github</Anchor>

<a href="https://github.com" title="github" target="_top">Go Github</a>
```
{% endcode %}

### For `bool` type

Support fixed value if `true`

```csharp
[Parameter][HtmlAttribute("collapse","toggle")]public bool Collapse { get; set; }
```

```cshtml
<Component Collapse/>
<div collapse="toggle"></div>
```

Set `true` string if value is `true`

```csharp
[Parameter][HtmlAttribute("toggle")]public bool Collapse { get; set; }

```

```cshtml
<Component Collapse/>
<div toggle="true"></div>
```

### For other types

The parameter value could be the value of attribute

```csharp
[Parameter][HtmlAttribute("href")]public string? Link { get; set; }
```

```cshtml
<Component Link="www.github.com"/>
<a href="www.github.com"></a>
```
