Add href to Button

vizro-core/changelog.d/20241118_113651_huong_li_nguyen_button_alignment.md

@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/examples/scratch_dev/app.py

@@ -1,45 +1,15 @@
 """Dev app to try things out."""
 
-import pandas as pd
 import vizro.models as vm
-import vizro.plotly.express as px
 from vizro import Vizro
-from vizro._themes._color_values import COLORS
-
-pastry = pd.DataFrame(
-    {
-        "pastry": [
-            "Scones",
-            "Bagels",
-            "Muffins",
-            "Cakes",
-            "Donuts",
-            "Cookies",
-            "Croissants",
-            "Eclairs",
-            "Brownies",
-            "Tarts",
-            "Macarons",
-            "Pies",
-        ],
-        "Profit Ratio": [-0.10, -0.15, -0.05, 0.10, 0.05, 0.20, 0.15, -0.08, 0.08, -0.12, 0.02, -0.07],
-    }
-)
 
 
 page = vm.Page(
-    title="Charts UI",
+    title="Button Styling",
+    layout=vm.Layout(grid=[[0, 1]]),
     components=[
-        vm.Graph(
-            figure=px.bar(
-                pastry.sort_values("Profit Ratio"),
-                orientation="h",
-                x="Profit Ratio",
-                y="pastry",
-                color="Profit Ratio",
-                color_continuous_scale=COLORS["DIVERGING_RED_CYAN"],
-            ),
-        ),
+        vm.Button(),
+        vm.Button(text="Take me home", href="/"),
     ],
 )
 

vizro-core/src/vizro/models/_components/button.py

@@ -1,5 +1,5 @@
 from typing import Literal
-
+from dash import dcc, get_relative_path
 import dash_bootstrap_components as dbc
 
 try:
@@ -24,11 +24,13 @@ class Button(VizroBaseModel):
 
     type: Literal["button"] = "button"
     text: str = Field("Click me!", description="Text to be displayed on button.")
+    href: str = Field("", description="URL (relative or absolute) to navigate to.")
     actions: list[Action] = []
 
     # Re-used validators
     _set_actions = _action_validator_factory("n_clicks")
 
     @_log_call
     def build(self):
-        return dbc.Button(id=self.id, children=self.text)
+        return dbc.Button(id=self.id,children=self.text,   href=get_relative_path(self.href) if self.href.startswith("/") else self.href,
+                target="_top")