# Attributes

Writing attributes is very straight-forward. Simply put them in parentheses directly behind the element's name. You can assign an attribute any printable expression you want.

{% tabs %}
{% tab title="Corgi" %}

```pug
a(href="https://github.com/mavolin/corgi") Corgi's GitHub
```

{% endtab %}

{% tab title="HTML" %}

```markup
<a href="https://github.com/mavolin/corgi">Corgi's GitHub</a>
```

{% endtab %}
{% endtabs %}

To write boolean attributes omit the value or set it to a boolean:

{% tabs %}
{% tab title="Corgi" %}

```pug
button(disabled) Click me!
button(disabled=true) Click me!
- b := false
button(disabled=b) Click me!
```

{% endtab %}

{% tab title="HTML" %}

```markup
<button disabled>Click me!</button>
<button disabled>Click me!</button>


```

{% endtab %}
{% endtabs %}

Attributes can even span multiple lines.

{% tabs %}
{% tab title="Corgi" %}

```pug
input(
  type="checkbox",
  name="agreement",
  checked,
)
```

{% endtab %}

{% tab title="HTML" %}

```markup
<input
  type="checkbox"
  name="agreement"
  checked
>
```

{% endtab %}
{% endtabs %}

## Classes and IDs

Classes and IDs, being incredibly common, even get their own short form.

{% hint style="info" %}
Corgis are smart doggos! Corgi will combine multiple class attributes and short forms into a single `class` attribute. This does not work for other attributes.
{% endhint %}

{% tabs %}
{% tab title="Corgi" %}

```pug
a.foo#bar(class="foobar", class="fooz baz") Incredible!
```

{% endtab %}

{% tab title="HTML" %}

```markup
<a class="foo foobar fooz baz" id="bar">Incredible!</a>
```

{% endtab %}
{% endtabs %}

## The `&`-Operator

One of the features that sets corgi apart from other template engines is its `&`-operator.

You can use it to add an attribute to the element from its body. This is super useful, if your attribute is conditional:

{% tabs %}
{% tab title="Corgi" %}

```pug
func Button(disabled bool)

button.bar
  if disabled
    &.foo(disabled)
  > Click me

```

{% endtab %}

{% tab title="HTML—true" %}

```markup
<!-- Button(true) -->

<button class="bar foo" disabled>


    Click me!
</button>
```

{% endtab %}

{% tab title="HTML—false" %}

```html
<!-- Button(false) -->

<button class="bar">


    Click me!
</button>
```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
You can only place the `&`-operator before you write text or another element to the element's body. If you don't, the compiler will complain:

```pug
func Example()

button
  > Click me!
  &(disabled)
```

The above won't compile:

{% code overflow="wrap" fullWidth="false" %}

```
error: use of & after writing to element's body
  > example.corgi:5:3
  |
3 | button
  | ~~~~~~ in this element
4 |   > Click me!
  |   ~~~~~~~~~~~ you wrote an arrow block here
5 |   &(disabled)
  |   ^ so you cannot place an & here
suggestion: you can only use the & operator before you write to the body of an element.
```

{% endcode %}
{% endhint %}

## The `div` Shorthand

`div`s are incredibly common. Therefore, as long as your div has at least one class or an id, you can write `.foo` or `#bar` to produce a `div`.

{% tabs %}
{% tab title="Corgi" %}

```pug
div.foo#bar All
.foo#bar the
#bar.foo same
```

{% endtab %}

{% tab title="HTML" %}

```markup
<div class="foo" id="bar">All</div>
<div class="foo" id="bar">the</div>
<div class="foo" id="bar">same</div>
```

{% endtab %}
{% endtabs %}