diff --git a/examples/component/button.cpp b/examples/component/button.cpp
index 27439a39..e5e0de91 100644
--- a/examples/component/button.cpp
+++ b/examples/component/button.cpp
@@ -12,13 +12,40 @@
 
 using namespace ftxui;
 
+// This is a helper function to create a button with a custom style.
+// The style is defined by a lambda function that takes an EntryState and
+// returns an Element.
+// We are using `center` to center the text inside the button, then `border` to
+// add a border around the button, and finally `flex` to make the button fill
+// the available space.
+ButtonOption Style() {
+  auto option = ButtonOption::Animated();
+  option.transform = [](const EntryState& s) {
+    auto element = text(s.label);
+    if (s.focused) {
+      element |= bold;
+    }
+    return element | center | borderEmpty | flex;
+  };
+  return option;
+}
+
 int main() {
   int value = 50;
 
+  // clang-format off
+  auto btn_dec_01 = Button("-1", [&] { value += 1; }, Style());
+  auto btn_inc_01 = Button("+1", [&] { value -= 1; }, Style());
+  auto btn_dec_10 = Button("-10", [&] { value -= 10; }, Style());
+  auto btn_inc_10 = Button("+10", [&] { value += 10; }, Style());
+  // clang-format on
+
   // The tree of components. This defines how to navigate using the keyboard.
-  auto buttons = Container::Horizontal({
-      Button("Decrease", [&] { value--; }),
-      Button("Increase", [&] { value++; }),
+  // The selected `row` is shared to get a grid layout.
+  int row = 0;
+  auto buttons = Container::Vertical({
+      Container::Horizontal({btn_dec_01, btn_inc_01}, &row) | flex,
+      Container::Horizontal({btn_dec_10, btn_inc_10}, &row) | flex,
   });
 
   // Modify the way to render them on screen: