diff --git a/Components/Button.ux b/Components/Button.ux
new file mode 100644
index 0000000..131fd71
--- /dev/null
+++ b/Components/Button.ux
@@ -0,0 +1,84 @@
+<Panel ux:Class="Material.Button" Alignment="Center" Enabled="true" Raised="true" Height="48" MinWidth="88" Padding="8,0" HitTestMode="LocalBounds" BackgroundColor="White" InkColor="#ccc">
+
+	<string ux:Property="Text" />
+	<bool ux:Property="Enabled" />
+	<bool ux:Property="Raised" />
+	<float4 ux:Property="BackgroundColor"/>
+	<float4 ux:Property="InkColor"/>
+
+	<WhileFalse Value="{ReadProperty Enabled}">
+		<Change text.Opacity="0.26"/>
+		<Change text.TextColor="#000000"/>
+	</WhileFalse>
+
+	<!-- button body with shadow (layer 1)-->
+	<Rectangle ux:Name="raisedButtonBody" ZOffset="1" Height="36" Padding="8,0" CornerRadius="2">
+		<SolidColor Color="{ReadProperty BackgroundColor}" />
+		<WhileTrue Value="{ReadProperty Raised}">
+			<Shadow ux:Name="raisedShadow" Distance="2" Size="3" />
+		</WhileTrue>
+	</Rectangle>
+
+	<WhileTrue Value="{ReadProperty Enabled}">
+
+		<!-- ink ripple effect panel (layer 2) -->
+		<Rectangle ux:Name="inkPanel" ZOffset="2" Height="{ReadProperty raisedButtonBody.Height}" Padding="{ReadProperty raisedButtonBody.Padding}" CornerRadius="{ReadProperty raisedButtonBody.CornerRadius}" ClipToBounds="true">
+
+			<WhileTrue ux:Name="showInk">
+				<Circle ux:Name="ink" Anchor="50%,50%" LayoutMaster="this" Layer="Background" LayoutRole="Standard" Alignment="TopLeft" Offset="{ReadProperty touch.PressedPosition}" Width="width(this)*2" Height="width(this)*2" Color="{ReadProperty InkColor}" Opacity="1">
+
+					<AddingAnimation>
+						<Change ux:Name="opacityAnimator" Target="ink.Opacity" Value="0" DurationBack="0.1" />
+						<Scale ux:Name="scaleAnimator" Factor="0" MixOp="Add" Duration="0.6" Easing="Material.StandardCurve" />
+					</AddingAnimation>
+
+					<RemovingAnimation>
+						<Change Target="ink.Opacity" Value="0" Duration="0.1" />
+					</RemovingAnimation>
+
+				</Circle>
+
+			</WhileTrue>
+
+			<Timeline ux:Name="singleRipple" PlayMode="Once">
+
+				<Change Target="ink.Opacity" Easing="Material.StandardCurve">
+					<Keyframe Value="0" Time="0" />
+					<Keyframe Value="1" Time="0.3" />
+				</Change>
+
+				<!-- progress = 0 -->
+				<Set opacityAnimator.Duration="0.05" AtProgress="0" />
+				<Set scaleAnimator.Duration="0.3" AtProgress="0" />
+				<Set showInk.Value="true" AtProgress="0" />
+
+				<!-- progress = 1 -->
+				<Set opacityAnimator.Duration="0.2" AtProgress="1" />
+				<Set showInk.Value="false" AtProgress="1" />
+				<Set scaleAnimator.Duration="0.6" AtProgress="1" />
+
+			</Timeline>
+
+		</Rectangle>
+
+		<WhilePressed ux:Name="touch">
+			<Change showInk.Value="true" />
+		</WhilePressed>
+
+		<WhilePressed>
+			<Change raisedShadow.Distance="4" Duration="0.25" Easing="Material.DecelerationCurve" />
+			<Change raisedShadow.Size="4" Duration="0.25" Easing="Material.DecelerationCurve" />
+		</WhilePressed>
+
+		<Tapped>
+			<TimelineAction Target="singleRipple" How="PulseForward" When="Forward" />
+		</Tapped>
+
+	</WhileTrue>
+
+	<!-- content panel (layer 3) -->
+	<Rectangle ux:Name="innerPanel" ZOffset="3" Height="{ReadProperty raisedButtonBody.Height}" Padding="{ReadProperty raisedButtonBody.Padding}" CornerRadius="{ReadProperty raisedButtonBody.CornerRadius}" ClipToBounds="true">
+		<Text ux:Name="text" Value="{ReadProperty Text}" Alignment="Center" FontSize="14"/>
+	</Rectangle>
+
+</Panel>
\ No newline at end of file
diff --git a/MainView.ux b/MainView.ux
index 2e56b90..9346c47 100644
--- a/MainView.ux
+++ b/MainView.ux
@@ -3,14 +3,27 @@
 		<Material.Drawer ux:Binding="Drawer" Edge="Left">
 			<Text Alignment="Center">Hello!</Text>
 		</Material.Drawer>
-			
-		<DockPanel>
 
+		<DockPanel>
 			<Material.AppBar Dock="Top">
 				<Material.AppBarIcon Dock="Left" Icon="Menu" Clicked="{openDrawerPanel}" />
 				<Material.AppBarIcon Dock="Right" Icon="DotsVertical" Clicked="{toggleMenu}" />
 				<Material.AppBarIcon Dock="Right" Icon="AccountPlus"  />
 			</Material.AppBar>
+
+			<Rectangle Dock="Top" Margin="5" CornerRadius="5">
+				<StackLayout/>
+				<Stroke Width="1" Color="#aaa"/>
+				<Material.Text Alignment="Center" Margin="10" Value="Material.Button"/>
+				<StackPanel Orientation="Horizontal">
+					<Material.Button Text="Button - Enabled" Raised="true" Enabled="true" BackgroundColor="Material.Blue200" InkColor="Material.Blue300"/>
+					<Material.Button Text="Button - Disabled" Raised="true" Enabled="false" BackgroundColor="Material.Blue200"/>
+				</StackPanel>
+				<StackPanel Orientation="Horizontal">
+					<Material.Button Text="Flat Button - Enabled" Raised="false" Enabled="true" BackgroundColor="#FFFFFF00" InkColor="Material.Blue300"/>
+					<Material.Button Text="Flat Button - Disabled" Raised="false" Enabled="false" BackgroundColor="#FFFFFF00"/>
+				</StackPanel>
+			</Rectangle>
 			
 			<StackPanel Alignment="BottomRight">
 				<Material.MiniActionButton Icon="Plus" />