Assistant button is a UI element that triggers an AI-related action or event.
+
+
-For the two types of button, OUDS Web has a common base `.btn` class that sets up default styles such as padding and content alignment. By default, `.btn` controls have a transparent border and background color, but still defines basic focus and hover styles. The `.btn` class is intended to be used in conjunction with our button variants, or to serve as a basis for your own custom styles. The most basic button is the `.btn-default` variant.
+For the three types of button, OUDS Web has a common base `.btn` class that sets up default styles such as padding and content alignment. By default, `.btn` controls have a transparent border and background color, but still defines basic focus and hover styles. The `.btn` class is intended to be used in conjunction with our button variants, or to serve as a basis for your own custom styles. The most basic button is the `.btn-default` variant.
Default`} />
Next`} />
+Default`} />
+
### Accessibility (semantics)
The `.btn` classes are designed to be used with the `
+
Button link
+
+
Navigation button link`} />
When navigation buttons are used for global navigation (between pages or within content), they should be wrapped in a `
+
+
+
+
`} />
@@ -128,11 +156,17 @@ Rounded corners buttons is a project-wide option therefore all your buttons shou
+
+
+
+
+
+
`} />
@@ -149,30 +183,35 @@ Rounded corners buttons is a project-wide option therefore all your buttons shou
You don’t need to apply any spacing utility on the icon to get consistent spacing, as the margin is already handled by OUDS Web.
+
+
+
+
+
+
+
+
+
+
`} />
@@ -225,30 +269,35 @@ Add `.btn-icon` to get a squared button, meant to only contain an icon. Make sur
{/* TODO: Add a paragraph about tooltip and/or title */}
+
+
+
+
+
+
+
+
+
+
`} />
@@ -306,21 +360,31 @@ In need of a button, but not the hefty background colors they bring? Replace the
#### Disabled
-Make buttons inactive by adding the `disabled` boolean attribute to any `