---
description: Define CssClassAttribute for component class or parameter
---

# CssClass Attribute

### For Component

> The class string always applied when component is initialized.

{% code title="Alert.razor" %}
```cshtml
@inherits BlazorComponentBase
@attribute [CssClass("alert")]

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

@code{    
    [Parameter]public RenderFragment? ChildContent { get; set; }
}

```
{% endcode %}

```csharp
[CssClass("alert")]
public class Alert : BlazorComponentBase, IHasChildContent
{
    [Parameter]public RenderFragment? ChildContent { get; set; }
}
```

{% code title="Index.razor" %}
```cshtml
@page "/"
<Alert>Alert</Alert>

<div class="alert">Alert</div>
```
{% endcode %}

### For Parameter

The CSS value can apply when parameter has value

* For `bool` type

> Only `true` value to apply the css string

{% code title="Alert.razor" %}
```cshtml
@inherits BlazorComponentBase
@attribute [CssClass("alert")]

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

@code{
    [Parameter]public RenderFragment? ChildContent { get; set; }
    [Parameter][CssClass("active")]public bool Active { get; set; }
}

```
{% endcode %}

```csharp
[CssClass("alert")]
public class Alert : BlazorComponentBase, IHasChildContent
{
    [Parameter]public RenderFragment? ChildContent { get; set; }
    [Parameter][CssClass("active")]public bool Active { get; set; }
}
```

{% code title="Index.razor" %}
```cshtml
@page "/"

<Alert Active>Alert</Alert>

<div class="alert active">Alert</div>
```
{% endcode %}

* For `Enum` type

> The value of parameter could be appended behind the css string with enum member

```csharp
enum Color
{
    Primary,
    Secondary,
    [CssClass("info")]Information
}

[Parameter][CssClass("alert-")]public Color? Color { get; set; }
```

```cshtml
<Component Color="Color.Primary"/>
<div class="alert-primary"></div>

<Component Color="Color.Information"/>
<div class="alert-info"></div>
```

* For other value types

> The parameter value is appended to the css value

```csharp
[Parameter][CssClass("margin-")]public int? Margin { get; set; }
```

```cshtml
<Component Margin="5"/>

<div class="margin-5"></div>
```

NOTE: The value should be Nullable because default value of int type is 0

Even though you didn't assign a value to the parameter, you still have a default value

```csharp
[Parameter][CssClass("margin-")]public int Margin { get; set; }
```

```cshtml
<Component />

<div class="margin-0"></div>
```

### Pre-Definition

Define `CssClassAttribute` in interface to reuse in component

```csharp
[CssClass("ui")]
public interface IHasUI { }

public interface IHasDisabled
{
    [CssClass("disabled")]bool Disabled { get; set; }
}

[CssClass("btn")]
public class Button : BlazorComponentBase, IHasUI, IHasDisabled
{
    [Parameter]public bool Disabled { get; set; }
}
```

```cshtml
<Button Disabled/>

<div class="ui btn disabled"></div>
```

* Override pre-definition

```csharp
[CssClass("btn")]
public class Button : BlazorComponentBase, IHasUI, IHasDisabled
{
    [Parameter][CssClass("btn-disabled")]public bool Disabled { get; set; }
}
```

```cshtml
<Button Disabled/>

<div class="ui btn btn-disabled"></div>
```

### Order

Set `Order` property in `CssClassAttribute` to sort css string

```csharp
[Parameter][CssClass("active", Order = 10)]public bool Active { get; set; }
[Parameter][CssClass("disabled")]public bool Disbaled { get; set; }
[Parameter][CssClass("m-", Order = 5)]public int? Margin { get; set; }
```

```cshtml
<Component Acitve Disabled Margin="2"/>

<div class="disabled m-2 active"/></div>
```

### Disabled

Set `Disabled=true` to disable css string apply when parameter set

```csharp
public interface IHasDisabled
{
    [CssClass("disabled")]bool Disabled { get; set; }
}

[CssClass("btn")]
public class Button : BlazorComponentBase, IHasUI, IHasDisabled
{
    [Parameter][CssClass(Disabled = true)]public bool Disabled { get; set; }
}
```

```cshtml
<Button Disabled />

<div class="btn ui"></div>
```

### Concat

Set `Concat=true` to concat `CssClassAttribute` value from derived class

```csharp
[CssClass("button")]
[HtmlTag("button")]
public abstract class ButtonBase : BlazorComponentBase
{
    //...
}

[CssClass("btn", Concat = true)]
public class BootstrapButton : ButtonBase
{
}
```

```cshtml
<BootstrapButton />

<button class="btn button"></button>
```
