---
schema_version: "1"
id: 7556f71cf3a2e2ea28e9f06903f2a47526b75caca61fad4f0003f2e865e751a0
title: Component Body
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/components/components-body.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/components-body.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: e30a0401f9579e424f986292dfa4f8eb84f0a7b084ad4a04a0d0cbabb38d23c6
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Component Body

The root-level tag of every component is `<aura:component>`. Every component inherits the `body` attribute from `<aura:component>`.

The `<aura:component>` tag can contain tags, such as `<aura:attribute>`, `<aura:registerEvent>`, `<aura:handler>`, `<aura:set>`, and so on. Any free markup that is not enclosed in one of the tags allowed in a component is assumed to be part of the body and is set in the `body` attribute.

The `body` attribute has type `Aura.Component[]`. It can be an array of one component, or an empty array, but it's always an array.

In a component, use “`v`” to access the collection of attributes. For example, `{!v.body}` outputs the body of the component.

## Setting the Body Content

To set the `body` attribute in a component, add free markup within the `<aura:component>` tag. For example:

<!-- otherprops: set_clipboard -->
```nolang
<aura:component>
    <!--START BODY-->
    <div>Body part</div>
    <lightning:button label="Push Me" onclick="{!c.doSomething}"/>
    <!--END BODY-->
</aura:component>

```

To set the value of an inherited attribute, use the `<aura:set>` tag. Setting the body content is equivalent to wrapping that free markup inside `<aura:set attribute="body">`. Since the `body` attribute has this special behavior, you can omit `<aura:set attribute="body">`.

The previous sample is a shortcut for this markup. We recommend the less verbose syntax in the previous sample.

<!-- otherprops: set_clipboard -->
```nolang
<aura:component>
    <aura:set attribute="body">
        <!--START BODY-->
        <div>Body part</div>
        <lightning:button label="Push Me" onclick="{!c.doSomething}"/>
        <!--END BODY-->
    </aura:set>
</aura:component>

```

The same logic applies when you use any component that has a `body` attribute, not just `<aura:component>`. For example:

<!-- otherprops: set_clipboard -->
```nolang
<lightning:tabset>
    <lightning:tab label="Tab 1">
        Hello world!
    </lightning:tab>
</lightning:tabset>

```

This is a shortcut for:

<!-- otherprops: set_clipboard -->
```nolang
<lightning:tabset>
    <lightning:tab label="Tab 1">
        <aura:set attribute="body">
            Hello World!
        </aura:set>
    </lightning:tab>
</lightning:tabset>

```

## Accessing the Component Body

To access a component body in JavaScript, use `component.get("v.body")`.

**See Also**  


-   [aura:set](https://developer.salesforce.com/docs/platform/aura-platform/ref/ref-set-intro.md)
-   [Working with a Component Body in JavaScript](https://developer.salesforce.com/docs/platform/aura-platform/js/js-cmp-body.md)