diff --git a/tui/src/tui_content.rs b/tui/src/tui_content.rs
index 6b668c5..38960b9 100644
--- a/tui/src/tui_content.rs
+++ b/tui/src/tui_content.rs
@@ -22,6 +22,7 @@ impl<T: Content<TuiOut>> Content<TuiOut> for std::sync::Arc<T> {
 }
 
 mod tui_border;   pub use self::tui_border::*;
+mod tui_button;   pub use self::tui_button::*;
 mod tui_color;    pub use self::tui_color::*;
 mod tui_field;    pub use self::tui_field::*;
 mod tui_phat;     pub use self::tui_phat::*;
diff --git a/tui/src/tui_content/tui_button.rs b/tui/src/tui_content/tui_button.rs
new file mode 100644
index 0000000..2a297da
--- /dev/null
+++ b/tui/src/tui_content/tui_button.rs
@@ -0,0 +1,40 @@
+use crate::{*, Color::*};
+
+pub fn button_2 <'a> (
+    key: impl Content<TuiOut> + 'a, label: impl Content<TuiOut> + 'a, editing: bool,
+) -> impl Content<TuiOut> + 'a {
+    let key = Tui::fg_bg(Tui::g(0), Tui::orange(), Bsp::e(
+        Tui::fg_bg(Tui::orange(), Reset, "▐"),
+        Bsp::e(key, Tui::fg(Tui::g(96), "▐"))
+    ));
+    let label = When::new(!editing, Tui::fg_bg(Tui::g(255), Tui::g(96), label));
+    Tui::bold(true, Bsp::e(key, label))
+}
+
+pub fn button_3 <'a, K, L, V> (
+    key:     K,
+    label:   L,
+    value:   V,
+    editing: bool,
+) -> impl Content<TuiOut> + 'a where
+    K: Content<TuiOut> + 'a,
+    L: Content<TuiOut> + 'a,
+    V: Content<TuiOut> + 'a,
+{
+    let key = Tui::fg_bg(Tui::g(0), Tui::orange(),
+        Bsp::e(Tui::fg_bg(Tui::orange(), Reset, "▐"), Bsp::e(key, Tui::fg(if editing {
+            Tui::g(128)
+        } else {
+            Tui::g(96)
+        }, "▐"))));
+    let label = Bsp::e(
+        When::new(!editing, Bsp::e(
+            Tui::fg_bg(Tui::g(255), Tui::g(96), label),
+            Tui::fg_bg(Tui::g(128), Tui::g(96), "▐"),
+        )),
+        Bsp::e(
+            Tui::fg_bg(Tui::g(224), Tui::g(128), value),
+            Tui::fg_bg(Tui::g(128), Reset, "▌"),
+        ));
+    Tui::bold(true, Bsp::e(key, label))
+}