> ## Documentation Index > Fetch the complete documentation index at: https://devdocs.xbox.com/llms.txt > Use this file to discover all available pages before exploring further. # Arcade Buttons > Arcade Buttons # Arcade Buttons Arcade buttons allow a collection of 6 or 8 buttons laid out in an arc, in the style of arcade cabinets. Most commonly used for fighting games. ## Properties `type` - "arcadeButtons"\ `lightKick` - *object*. The button for a small kick.\ `mediumKick` - *object*. The button for a medium kick.\ `heavyKick` - *object*. The button for a large kick.\ `specialKick` - *object*, *optional*. The button for a special kick.\ `lightPunch` - *object*. The button for a small punch.\ `mediumPunch` - *object*. The button for a medium punch.\ `heavyPunch` - *object*. The button for a large punch.\ `specialPunch` - *object*, *optional*. The button for a special punch. Each object above describes a button with the following properties: `action` - *string*. [Action(s)](/reference/system/touchadaptationkit/types/game-streaming-touch-action) to be invoked when a player touches the button. `enabled` - *boolean*, *optional*. Defaults to `true`. Sets the visual state of the control to enabled/disabled. A disabled control will still receive input from the player, but NOT change the visual style based on the input. `toggle` - *boolean*, *optional*. Defaults to `false`. * If `false`, input for the button will be sent when pressed and not when not pressed. * If `true`, each press of the button will switch whether input is being sent or not for the corresponding action(s). `visible` - *boolean*, *optional*. Defaults to `true`. Determines whether the control is displayed to the player to interact with. To change during game play see [Changing touch layouts using game state](/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-touch-changing-layouts-game-state#change_state). `styles` - *object*, *optional*. Customization of the visual representation of the control. The styles are represented as an object per state that can be styled. The button control can have the following states styled: * `default` - The base style. * `disabled` - The style when the control is disabled. If not specified, then when the control is disabled, a transformation will be applied to the default style to make it appear disabled. * `idle` - Applied when the player is NOT interacting with the control. * `activated` - Applied when the player is touching the button. **Styling properties per state** `opacity` - *number*, *optional*. The opacity to be applied to the control. Defaults to 1.0 for all states but `disabled`. `faceImage` - *object*, *optional*. Can either be an [icon](/reference/system/touchadaptationkit/types/game-streaming-touch-icon) or [image asset](/reference/system/touchadaptationkit/types/game-streaming-touch-asset). `background` - *object*, *optional*. Can either be a [color](/reference/system/touchadaptationkit/types/game-streaming-touch-color) or [image asset](/reference/system/touchadaptationkit/types/game-streaming-touch-asset). Is not visible in idle and disabled states. **Asset dimensions** For each of the style objects that accept image assets, a given asset must be provided in five DPI levels: @1.0x, @1.5x, @2.0x, @3.0x, and @4.0x. The resolution of an image at a given dpi level must be less or equal to the following maximum resolutions: | Object | @1.0x | @1.5x | @2.0x | @3.0x | @4.0x | | :--------- | :---- | :---- | :------ | :------ | :------ | | faceImage | 60x60 | 90x90 | 120x120 | 180x180 | 240x240 | | background | 60x60 | 90x90 | 120x120 | 180x180 | 240x240 | ## Remarks `arcadebuttons` allows you to arrange a set of buttons in a group of six or eight that is similar to an arcade cabinet. This is optimized for fighting games. There is also an indicator for the player to press that maps to all of the punch or kick buttons getting pressed together. The `arcadebuttons` takes more space and you should be careful with other controls that are placed around it. **Styling remarks** When in the `activated` state, the `faceImage` is displayed 25% smaller. There are labels and default styling for the background color for buttons that do not use custom assets and have a single action of `gamepadX`, `gamepadY`, `gamepadA`, or `gamepadB`. ## Samples #### Example 1: Arcade button - six buttons **Figure 1. Arcade Buttons** User interacting with an arcade buttons of six items ```JSON theme={null} { "type": "arcadeButtons", "lightPunch": { "action": "gamepadX", "styles": { "default" : { "faceImage" : { "type": "icon", "value": "lightPunch" } } } }, "mediumPunch": { "action": "gamepadY", "styles": { "default" : { "faceImage" : { "type": "icon", "value": "mediumPunch" } } } }, "heavyPunch": { "action": "rightBumper", "styles": { "default" : { "faceImage" : { "type": "icon", "value": "heavyPunch" } } } }, "lightKick": { "action": "gamepadA", "styles": { "default" : { "faceImage" : { "type": "icon", "value": "lightKick" } } } }, "mediumKick": { "action": "gamepadB", "styles": { "default" : { "faceImage" : { "type": "icon", "value": "mediumKick" } } } }, "heavyKick": { "action": "leftBumper", "styles": { "default" : { "faceImage" : { "type": "icon", "value": "heavyKick" } } } } } ``` #### Example 2: Arcade button - eight buttons **Figure 1. Eight Item Arcade Buttons** User interacting with an arcade buttons of eight items ```JSON theme={null} { "type": "arcadeButtons", "lightPunch": { "action": "gamepadX", "styles": { "default" : { "faceImage" : { "type": "icon", "value": "lightPunch" } } } }, "mediumPunch": { "action": "gamepadY", "styles": { "default" : { "faceImage" : { "type": "icon", "value": "mediumPunch" } } } }, "heavyPunch": { "action": "rightBumper", "styles": { "default" : { "faceImage" : { "type": "icon", "value": "heavyPunch" } } } }, "specialPunch": { "action": "rightTrigger", "styles": { "default" : { "faceImage" : { "type": "icon", "value": "heavyPunch2" } } } }, "lightKick": { "action": "gamepadA", "styles": { "default" : { "faceImage" : { "type": "icon", "value": "lightKick" } } } }, "mediumKick": { "action": "gamepadB", "styles": { "default" : { "faceImage" : { "type": "icon", "value": "mediumKick" } } } }, "heavyKick": { "action": "rightTrigger", "styles": { "default" : { "faceImage" : { "type": "icon", "value": "heavyKick" } } } }, "specialKick": { "action": "leftBumper", "styles": { "default" : { "faceImage" : { "type": "icon", "value": "heavyKick2" } } } } } ``` ## Requirements **Layout Version:** 1.0+ (Styling available from layout version 3.0+) ## Related topics - [Touch Adaptation Kit](/reference/system/touchadaptationkit/touchadaptationkit-reference.md) - [Touch Adaptation Kit (TAK) Reference](/build/core-features/common/game-streaming/game-streaming-touch-touch-adaptation-kit-overview.md) - [Touch Adaptation Kit (TAK) 参考](/zh-CN/build/core-features/common/game-streaming/game-streaming-touch-touch-adaptation-kit-overview.md) - [GameInputArcadeStickButtons](/reference/input/gameinput/enums/gameinputarcadestickbuttons.md) - [IGameInputMapper::GetArcadeStickButtonMappingInfo](/reference/input/gameinput/interfaces/igameinputmapper/methods/igameinputmapper_getarcadestickbuttonmappinginfo.md)