--- title: ASButtonNode layout: docs permalink: /docs/button-node.html prevPage: cell-node.html nextPage: text-node.html --- ### Basic Usage `ASButtonNode` subclasses `ASControlNode` in the same way `UIButton` subclasses `UIControl`. In contrast, being able to layer back the subnodes of every button can significantly lighten main thread impact relative to `UIButton`. ### Control State If you've used `-setTitle:forControlState:` then you already know how to set up an ASButtonNode. The `ASButtonNode` version adds in a few parameters for conveniently setting attributes.

[buttonNode setTitle:@"Button Title Normal" withFont:nil withColor:[UIColor blueColor] forState:ASControlStateNormal];

buttonNode.setTitle("Button Title Normal", with: nil, with: .blue, for: .normal)

If you need even more control, you can also opt to use the attributed string version directly:

Swift Objective-C

[self.buttonNode setAttributedTitle:attributedTitle forState:ASControlStateNormal];

buttonNode.setAttributedTitle(attributedTitle, for: .normal)

### Target-Action Pairs Again, analagous to UIKit, you can add sets of target-action pairs to respond to various events.

Swift Objective-C

[buttonNode addTarget:self action:@selector(buttonPressed:) forControlEvents:ASControlNodeEventTouchUpInside];

buttonNode.addTarget(self, action: #selector(buttonPressed), forControlEvents: .touchUpInside)

### Content Alignment `ASButtonNode` offers both `contentVerticalAlignment` and `contentHorizontalAlignment` properties. This allows you to easily set the alignment of the titleLabel or image you're using for your button.

Swift Objective-C

self.buttonNode.contentVerticalAlignment = ASVerticalAlignmentTop;
self.buttonNode.contentHorizontalAlignment = ASHorizontalAlignmentMiddle;

buttonNode.contentVerticalAlignment = .top
buttonNode.contentHorizontalAlignment = .middle

Note: At the moment, this property will not work if you aren't using -layoutSpecThatFits:.

### Gotchas There are a few things that might trip up someone new to the framework. ##### View Hierarchies Let's say you want to add an `ASButtonNode` to the view of one of your existing view controllers. The first thing you'll notice is that setting a title for a control state doesn't seem to make your title appear. You can fix this by calling `-measure:` on the button which will cause its title label to be measured and laid out. The next thing you'll notice is that, if you set titles of various lengths for different control states, the button will dynamically grow and shrink as the title changes. This is because changing the title causes `-setNeedsLayout` to be called on the button. Within a node hierarchy, this makes sense, and will work as expected. Long story short, use an `ASViewController`. ##### Selected State If you want your button to change to a "selected" state after being tapped, you'll need to do that manually.