<!--
{
  "documentType" : "article",
  "framework" : "TVML",
  "identifier" : "/documentation/TVML/buttonlockup",
  "metadataVersion" : "0.1.0",
  "role" : "collectionGroup",
  "title" : "buttonLockup"
}
-->

# buttonLockup

Creates a button that can also have a badge associated with it.

## Overview

Images on buttons are often used to indicate the function of the button. Use the
`buttonLockup` element to add a badge to the the button. Here’s an example that shows
a button with the preview icon and a title.

```xml
<buttonLockup>
    <badge src="resource://button-preview" />
    <title>Preview</title>
</buttonLockup>
```

### Subelements of buttonLockup

- [badge](/documentation/TVML/badge)
- [title](/documentation/TVML/title)

### Elements that Use buttonLockup

- [organizer](/documentation/TVML/organizer)
- [row](/documentation/TVML/row)

## Topics

### Valid TVML Styles

[padding](/documentation/TVML/padding)

Specifies the padding between the border and contents of an element.

[width](/documentation/TVML/element-shaping-width)

Specifies how wide an element is.

### Valid TVML Attributes

[binding](/documentation/TVML/binding)

Associates information in a data item with an element.

[prototype](/documentation/TVML/prototype)

Associates a data item type with an element.

[theme](/documentation/TVML/theme)

Sets the color scheme for an element.



---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)