diff --git a/apps/website/pages/components/button-link/code.tsx b/apps/website/pages/components/button-link/code.tsx new file mode 100644 index 000000000..616b037b9 --- /dev/null +++ b/apps/website/pages/components/button-link/code.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import ButtonLinkPageLayout from "screens/components/button-link/ButtonLinkPageLayout"; +import ButtonLinkCodePage from "screens/components/button-link/code/ButtonLinkCodePage"; + +const Code = () => ( + <> + + Button Link code — Halstack Design System + + + +); + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/button-link/index.tsx b/apps/website/pages/components/button-link/index.tsx new file mode 100644 index 000000000..ddf350fe6 --- /dev/null +++ b/apps/website/pages/components/button-link/index.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import ButtonLinkPageLayout from "screens/components/button-link/ButtonLinkPageLayout"; +import ButtonLinkOverviewPage from "screens/components/button-link/overview/ButtonLinkOverviewPage"; + +const Index = () => ( + <> + + Button Link — Halstack Design System + + + +); + +Index.getLayout = (page: ReactElement) => {page}; + +export default Index; diff --git a/apps/website/screens/common/componentsList.json b/apps/website/screens/common/componentsList.json index 818d91ffb..6921ee03e 100644 --- a/apps/website/screens/common/componentsList.json +++ b/apps/website/screens/common/componentsList.json @@ -291,6 +291,12 @@ "status": "stable", "icon": "arrow_back" }, + { + "label": "Button link", + "path": "/components/button-link", + "status": "stable", + "icon": "outbound" + }, { "label": "Contextual menu", "path": "/components/contextual-menu", diff --git a/apps/website/screens/components/button-link/ButtonLinkPageLayout.tsx b/apps/website/screens/components/button-link/ButtonLinkPageLayout.tsx new file mode 100644 index 000000000..5b1690b30 --- /dev/null +++ b/apps/website/screens/components/button-link/ButtonLinkPageLayout.tsx @@ -0,0 +1,31 @@ +import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react"; +import PageHeading from "@/common/PageHeading"; +import TabsPageHeading from "@/common/TabsPageLayout"; +import ComponentHeading from "@/common/ComponentHeading"; +import { ReactNode } from "react"; + +const ButtonLinkPageHeading = ({ children }: { children: ReactNode }) => { + const tabs = [ + { label: "Overview", path: "/components/button-link" }, + { label: "Code", path: "/components/button-link/code" }, + ]; + + return ( + + + + + + Button link is a navigation element that combines the visual appearance of a button with the native behavior + and semantics of a link. It allows users to navigate to another page, resource, or destination through a + more prominent, button-like interface. + + + + + {children} + + ); +}; + +export default ButtonLinkPageHeading; diff --git a/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx b/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx new file mode 100644 index 000000000..2044bf492 --- /dev/null +++ b/apps/website/screens/components/button-link/code/ButtonLinkCodePage.tsx @@ -0,0 +1,205 @@ +import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react"; +import DocFooter from "@/common/DocFooter"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import Code, { TableCode } from "@/common/Code"; +import StatusBadge from "@/common/StatusBadge"; +import Example from "@/common/example/Example"; +import basicUsage from "./examples/basicUsage"; +import icons from "./examples/icons"; +import modes from "./examples/modes"; +import sizes from "./examples/sizes"; + +const sections = [ + { + title: "Props", + content: ( + + + + Name + Type + Description + Default + + + + + ariaLabel + + string + + + Text to be used as aria-label for the button link. If provided, it takes precedence over the label as the + accessible name. It will be required if no label or title are provided. + + - + + + disabled + + boolean + + If true, the link will be disabled. + + false + + + + + + + href + + + + string + + Page to be opened when the user clicks on the link. + - + + + icon + + string | {"(React.ReactNode & React.SVGProps )"} + + + + Material Symbol + {" "} + name or SVG element as the icon that will be placed next to the link text. When using Material Symbols, + replace spaces with underscores. By default they are outlined if you want it to be filled prefix the + symbol name with "filled_". Required if no label is provided. + + - + + + iconPosition + + 'before' | 'after' + + Indicates the position of the icon in the component. + + 'before' + + + + label + + string + + + Text to be placed in the button link. Required if no icon is provided. + + - + + + mode + + 'primary' | 'secondary' | 'tertiary' + + The available button link modes. + + 'primary' + + + + newWindow + + boolean + + If true, the page is opened in a new browser tab. + + false + + + + onClick + + {"(event: React.MouseEvent) => void"} + + + If defined, the link will be displayed as a button. This function will be called when the user clicks the + link. + + - + + + ref + + {"React.Ref"} + + Ref of the link element. + - + + + size + + + { + "{ height: 'small' | 'medium' | 'large'; width: 'small' | 'medium' | 'large' | 'fillParent' | 'fitContent' }" + } + + + Object used to define the dimensions of the button in terms of height and width. + + {"{ height: 'large'; width: 'fitContent' }"} + + + + tabIndex + + number + + + Value of the tabindex attribute. + + + 0 + + + + title + + string + + + Text to be displayed as a tooltip when hovering over the link. If there is no label, the title will be + used as the aria-label. + + - + + + + ), + }, + { + title: "Examples", + subSections: [ + { + title: "Basic usage", + content: , + }, + { + title: "Icons", + content: , + }, + { + title: "Modes", + content: , + }, + { + title: "Size", + content: , + }, + ], + }, +]; + +const ButtonLinkCodePage = () => ( + + + + +); + +export default ButtonLinkCodePage; diff --git a/apps/website/screens/components/button-link/code/examples/basicUsage.tsx b/apps/website/screens/components/button-link/code/examples/basicUsage.tsx new file mode 100644 index 000000000..b35d0b991 --- /dev/null +++ b/apps/website/screens/components/button-link/code/examples/basicUsage.tsx @@ -0,0 +1,16 @@ +import { DxcButtonLink, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + + ); +}`; + +const scope = { + DxcButtonLink, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/button-link/code/examples/icons.tsx b/apps/website/screens/components/button-link/code/examples/icons.tsx new file mode 100644 index 000000000..d06a2645f --- /dev/null +++ b/apps/website/screens/components/button-link/code/examples/icons.tsx @@ -0,0 +1,20 @@ +import { DxcButtonLink, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + + + + + ); +}`; + +const scope = { + DxcButtonLink, + DxcFlex, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/button-link/code/examples/modes.tsx b/apps/website/screens/components/button-link/code/examples/modes.tsx new file mode 100644 index 000000000..aa58acb2d --- /dev/null +++ b/apps/website/screens/components/button-link/code/examples/modes.tsx @@ -0,0 +1,21 @@ +import { DxcButtonLink, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + + + + + + ); +}`; + +const scope = { + DxcButtonLink, + DxcFlex, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/button-link/code/examples/sizes.tsx b/apps/website/screens/components/button-link/code/examples/sizes.tsx new file mode 100644 index 000000000..341bccef9 --- /dev/null +++ b/apps/website/screens/components/button-link/code/examples/sizes.tsx @@ -0,0 +1,39 @@ +import { DxcButtonLink, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}`; + +const scope = { + DxcButtonLink, + DxcInset, + DxcFlex, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/button-link/overview/ButtonLinkOverviewPage.tsx b/apps/website/screens/components/button-link/overview/ButtonLinkOverviewPage.tsx new file mode 100644 index 000000000..d9c6d2b78 --- /dev/null +++ b/apps/website/screens/components/button-link/overview/ButtonLinkOverviewPage.tsx @@ -0,0 +1,466 @@ +import { DxcBulletedList, DxcFlex, DxcParagraph, DxcTypography, DxcTable } from "@dxc-technology/halstack-react"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import DocFooter from "@/common/DocFooter"; +import Image from "@/common/Image"; +import anatomy from "./images/button_link_anatomy.png"; +import Example from "@/common/example/Example"; +import variants from "./examples/variants"; +import HeaderDescriptionCell from "@/common/HeaderDescriptionCell"; +import iconUsage from "./examples/iconUsage"; + +const sections = [ + { + title: "Introduction", + content: ( + <> + + The Halstack Button Link component is designed for navigation that requires more visual emphasis than a + standard text link. It provides the familiar appearance of a button while preserving the expected behavior of + a link. + + + Although buttons and links can look similar, they serve different purposes. A button triggers an action within + the current interface, while a link navigates users to another destination. Button Link bridges this visual + distinction by allowing navigation to be presented with the appearance of a button without changing its + underlying semantics. + + + ), + }, + { + title: "Anatomy", + content: ( + <> + Button link anatomy + + + Container: provides the interactive area and visual treatment inherited from the existing + Button component. + + + Icon: appears before or after the label to provide additional context or clarify the + destination. + + + Label: communicates the destination or purpose of the navigation. + + + + Button link follows the existing button component's typography, spacing, sizing, and visual styling rules. + + + ), + }, + { + title: "Variants", + content: ( + <> + + Button link supports three visual variants: primary, secondary, and tertiary. Each variant provides a + different level of visual emphasis according to the importance of the destination within the interface. + + + + + + Variant + Description + + + + + + Primary + + + For the most prominent navigation destination within a page or user flow. Use when navigation represents + the main call to action. + + + + + Secondary + + + For less prominent navigation that still requires button-like emphasis. It can be used alongside a + primary button link or independently. + + + + + Tertiary + + + For the least pronounced navigation destinations. Use when a lighter visual treatment is sufficient, + such as supporting or contextual navigation. + + + + + + Choose the variant according to the importance of the destination within the interface. Avoid giving multiple + navigation elements the same level of prominence when a clear visual hierarchy can be established. + + + ), + }, + { + title: "Icon usage", + content: ( + <> + + Any icon from the application's chosen icon library can be used in Halstack button link. It is recommended to + use the same icon library throughout the application to maintain visual consistency. + + + + Icons can appear before or after the label, with an 8-pixel separation from the text, following the existing + button component's spacing rules. + + + Use icons when they provide additional meaning or help users understand the destination. + + + Consider using a trailing arrow to reinforce navigation when appropriate. + + + An external-link icon can help users recognize that the destination leads outside the current application. + + + Avoid using icons solely for decoration. The icon should provide meaningful context. + + + Ensure the label communicates the destination without relying on the icon alone. + + + Icon-only button links are allowed when the context supports them. In these cases, provide a tooltip and an + accessible name to communicate the link's purpose. + + + + + ), + }, + { + title: "Sizes", + content: ( + <> + + Button link follows the existing button component's sizing options: small, medium, and large. The size should + be selected according to the surrounding interface while maintaining consistency with other interactive + elements. + + + Varying button sizes help establish a clear visual hierarchy, guiding users towards the most critical actions. + Primary actions are made more prominent with larger buttons, while secondary actions use smaller buttons to + avoid distraction. + + + ), + subSections: [ + { + title: "Small", + content: ( + <> + + Small button links are suitable for compact layouts or contexts where space is limited. + + Use cases: + + + Compact spaces: Use in tables, toolbars, or other areas with limited space. + + + Supporting navigation: Suitable for less prominent navigation where a smaller visual + treatment is appropriate. + + + + ), + }, + { + title: "Medium", + content: ( + <> + + Medium button links provide a balance between visibility and space usage, making them suitable for general + navigation across applications. + + Use cases: + + + General navigation: Use as the standard size for most navigation scenarios. + + + Consistency: Helps maintain a consistent appearance with other medium-sized interactive + elements. + + + + ), + }, + { + title: "Large", + content: ( + <> + + Large button links provide greater visual prominence and are suitable for navigation that requires + stronger emphasis. + + Use cases: + + + Prominent destinations Use when directing users to an important page or section. + + + Call to action: Suitable for prominent navigation areas where encouraging users to + visit another destination is important. + + + + ), + }, + ], + }, + { + title: "Choosing between a link, button and button link", + subSections: [ + { + title: "Be clear and concise", + content: ( + <> + + Links and buttons are both interactive elements, but they serve different purposes. The main difference is + whether the interaction takes users to another destination or performs an action within the current + interface. + + + Choosing the right component is important because it affects not only how an element looks, but also how + it behaves, how users interact with it, and how assistive technologies interpret it. + + + ), + subSections: [ + { + title: "When to use a link", + content: ( + <> + + Use a link when the primary purpose is to navigate users to another page, section, or + resource, and the destination does not require strong visual emphasis. + + + Links are commonly integrated into content and provide a lightweight way to direct users to related + information. + + + Use cases: + + + Inline navigation: Direct users to related information within a paragraph or + sentence. + + + Performing an operation Link to related pages, documentation, or external + references. + + + Supporting navigation: Provide access to additional resources or secondary + destinations. + + + + ), + }, + { + title: "When to use a button", + content: ( + <> + + Use a button when the interaction triggers an action or changes something within the + current application or interface. + + + A button is intended for actions that do not primarily involve navigating to another destination. + + + Use cases: + + + Submitting information: Submit a form or send user-provided information. + + + Performing an operation: Save changes, delete an item, or update a record. + + + Changing the interface: Open a dialog, expand a section, or trigger an interaction. + + + Executing a process: Start an operation or initiate a workflow. + + + + ), + }, + { + title: "When to use a button link", + content: ( + <> + + Use a button link when the primary purpose is navigation, but the destination needs + more visual prominence than a standard Link can provide. + + + Button link combines the visual appearance of a button with the native behavior and semantics of a + link. It is useful when a navigation destination is important enough to stand out within the + interface, but the interaction should still behave like a link.{" "} + + + Use cases: + + + Prominent calls to action: Direct users to an important destination, such as "View + Details" or "Open Project". + + + Highlighted navigation: Provide access to an important section or resource that + needs greater visual emphasis than a standard text link. + + + + + Although button link looks like a button, it must retain link semantics and native anchor behavior. It + should navigate to a destination rather than trigger an action within the current interface + + + ), + }, + ], + }, + ], + }, + { + title: "Best practices", + subSections: [ + { + title: "General", + content: ( + <> + + + Use for navigation: Button link should only be used when the primary purpose is to + navigate users to another destination. + + + Choose the appropriate component: Use button for actions, standard Link for lightweight + navigation, and Button Link for prominent navigation. + + + Use clear labels: Choose concise and descriptive labels that help users understand + where the link will take them. + + + Maintain consistency: Follow the existing button component's typography, spacing, + sizing, and visual styling rules. + + + Avoid unnecessary emphasis: Do not use button link when a standard link provides + sufficient visual emphasis. + + + + ), + }, + { + title: "Variants and hierarchy", + content: ( + <> + + + Reserve primary for the main destination: Use primary for the most prominent navigation + destination within the relevant context. + + + Use secondary for supporting destinations: Choose Secondary when navigation needs + emphasis without competing with the primary destination. + + + Use tertiary for less prominent navigation: Use Tertiary when a lighter visual + treatment is more appropriate. + + + Establish a clear hierarchy: Avoid presenting several navigation destinations with + equal visual prominence when one should receive more attention + + + + ), + }, + { + title: "Navigation behavior", + content: ( + <> + + + Internal navigation: Use internal links to navigate to destinations within the same + application or website, following the application's established routing behavior. + + + External navigation: Use external links to navigate to destinations outside the current + application or website. Consider an external-link icon when it helps communicate this behavior. + + + Opening a new tab: Open destinations in a new tab only when required by the use case. + When appropriate, communicate this behavior to users. + + + + ), + }, + { + title: "Accessibility", + content: ( + <> + + + Preserve link semantics: Implement Button link using link semantics, regardless of its + visual variant. + + + Provide descriptive labels: Ensure the accessible name communicates the destination or + purpose of the link. + + + Support keyboard navigation: Ensure users can reach the component using the keyboard + and activate it using Enter. + + + Maintain visible focus: Provide a clearly visible focus indicator for keyboard users. + + + Ensure sufficient contrast: Maintain sufficient contrast between the component and its + background across its supported visual states. + + + Do not rely on icons alone: Icons should not replace the accessible name of the link. + + + Handle unavailable destinations appropriately If navigation is unavailable, ensure the + implementation prevents navigation and communicates the intended state to assistive technologies. + + + + ), + }, + ], + }, +]; + +const ButtonLinkOverviewPage = () => ( + + + + +); + +export default ButtonLinkOverviewPage; diff --git a/apps/website/screens/components/button-link/overview/examples/iconUsage.tsx b/apps/website/screens/components/button-link/overview/examples/iconUsage.tsx new file mode 100644 index 000000000..47391de8f --- /dev/null +++ b/apps/website/screens/components/button-link/overview/examples/iconUsage.tsx @@ -0,0 +1,47 @@ +import { DxcButtonLink, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + + + + + + + + + + + + + + + + + + ); +}`; + +const scope = { + DxcButtonLink, + DxcFlex, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/button-link/overview/examples/variants.tsx b/apps/website/screens/components/button-link/overview/examples/variants.tsx new file mode 100644 index 000000000..971de8cf1 --- /dev/null +++ b/apps/website/screens/components/button-link/overview/examples/variants.tsx @@ -0,0 +1,21 @@ +import { DxcButtonLink, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + + + + + + ); +}`; + +const scope = { + DxcButtonLink, + DxcFlex, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/button-link/overview/images/button_link_anatomy.png b/apps/website/screens/components/button-link/overview/images/button_link_anatomy.png new file mode 100644 index 000000000..a23569034 Binary files /dev/null and b/apps/website/screens/components/button-link/overview/images/button_link_anatomy.png differ diff --git a/packages/lib/src/button-link/ButtonLink.stories.tsx b/packages/lib/src/button-link/ButtonLink.stories.tsx new file mode 100644 index 000000000..6ebcb8fff --- /dev/null +++ b/packages/lib/src/button-link/ButtonLink.stories.tsx @@ -0,0 +1,3560 @@ +import Title from "../../.storybook/components/Title"; +import ExampleContainer from "../../.storybook/components/ExampleContainer"; +import { Meta, StoryObj } from "@storybook/react-vite"; +import { userEvent, within } from "storybook/test"; + +import DxcButtonLink from "./ButtonLink"; +import DxcFlex from "../flex/Flex"; +import DxcInset from "../inset/Inset"; +import DxcTooltip from "../tooltip/Tooltip"; + +export default { + title: "Button Link", + component: DxcButtonLink, +} satisfies Meta; + +const facebookIcon = ( + + + + + +); + +const ButtonLink = () => ( + <> + + <Title title="Primary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="primary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" ariaLabel="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="primary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" title="Home" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="primary" title="Facebook" disabled /> + </ExampleContainer> + </DxcFlex> + <Title title="Secondary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="secondary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="secondary" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" title="Home" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="secondary" title="Facebook" disabled /> + </ExampleContainer> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" iconPosition="after" mode="tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" title="Home" disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon={facebookIcon} mode="tertiary" title="Facebook" disabled /> + </ExampleContainer> + </DxcFlex> + <Title title="Small" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "small" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="primary" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="primary" + size={{ height: "small" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small" }} + title="Facebook" + disabled + /> + </ExampleContainer> + </DxcFlex> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "small", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Medium" mode="primary" size={{ height: "small", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Large" mode="primary" size={{ height: "small", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Fit content" + mode="primary" + size={{ height: "small", width: "fitContent" }} + /> + </ExampleContainer> + </DxcFlex> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Fill parent" + mode="primary" + size={{ height: "small", width: "fillParent" }} + /> + </ExampleContainer> + <Title title="Secondary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "small" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="secondary" + size={{ height: "small" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "small" }} + title="Facebook" + disabled + /> + </ExampleContainer> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "small" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="tertiary" + size={{ height: "small" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "small" }} + title="Facebook" + disabled + /> + </ExampleContainer> + </DxcFlex> + <Title title="Medium" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "medium" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="primary" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="primary" + size={{ height: "medium" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium" }} + title="Facebook" + disabled + /> + </ExampleContainer> + </DxcFlex> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "medium", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Medium" mode="primary" size={{ height: "medium", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Large" mode="primary" size={{ height: "medium", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Fit content" + mode="primary" + size={{ height: "medium", width: "fitContent" }} + /> + </ExampleContainer> + </DxcFlex> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Fill parent" + mode="primary" + size={{ height: "medium", width: "fillParent" }} + /> + </ExampleContainer> + <Title title="Secondary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "medium" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="secondary" + size={{ height: "medium" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "medium" }} + title="Facebook" + disabled + /> + </ExampleContainer> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "medium" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="tertiary" + size={{ height: "medium" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "medium" }} + title="Facebook" + disabled + /> + </ExampleContainer> + </DxcFlex> + <Title title="Large" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="primary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="primary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="primary" size={{ height: "large" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="primary" + size={{ height: "large" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="primary" + size={{ height: "large" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="primary" + size={{ height: "large" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large" }} + title="Facebook" + disabled + /> + </ExampleContainer> + </DxcFlex> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="primary" + size={{ height: "large", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Medium" mode="primary" size={{ height: "large", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Large" mode="primary" size={{ height: "large", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Fit content" + mode="primary" + size={{ height: "large", width: "fitContent" }} + /> + </ExampleContainer> + </DxcFlex> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Fill parent" + mode="primary" + size={{ height: "large", width: "fillParent" }} + /> + </ExampleContainer> + <Title title="Secondary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="secondary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="secondary" size={{ height: "large" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="secondary" + size={{ height: "large" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="secondary" + size={{ height: "large" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="secondary" + size={{ height: "large" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="secondary" + size={{ height: "large" }} + title="Facebook" + disabled + /> + </ExampleContainer> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <Title title="Default" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-visited"> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and hover" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-hover"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and focus" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Visited and active" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" label="Button Link" icon="home" mode="tertiary" size={{ height: "large" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink href="#not-visited" icon="home" mode="tertiary" size={{ height: "large" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-visited", "pseudo-active", "pseudo-focus"]}> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + /> + </ExampleContainer> + </DxcFlex> + <Title title="Disabled" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButtonLink href="#not-visited" label="Button Link" mode="tertiary" size={{ height: "large" }} disabled /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + mode="tertiary" + size={{ height: "large" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + label="Button Link" + icon="home" + iconPosition="after" + mode="tertiary" + size={{ height: "large" }} + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon="home" + mode="tertiary" + size={{ height: "large" }} + title="Home" + disabled + /> + </ExampleContainer> + <ExampleContainer> + <DxcButtonLink + href="#not-visited" + icon={facebookIcon} + mode="tertiary" + size={{ height: "large" }} + title="Facebook" + disabled + /> + </ExampleContainer> + </DxcFlex> + </> +); + +const Tooltip = () => ( + <> + <Title title="Default tooltip" theme="light" level={2} /> + <ExampleContainer> + <DxcButtonLink label="Button Link" href="#not-visited" title="Button Link" /> + </ExampleContainer> + </> +); + +const NestedTooltip = () => ( + <> + <Title title="Nested tooltip" theme="light" level={2} /> + <ExampleContainer> + <DxcInset top="var(--spacing-padding-xxl)"> + <DxcTooltip label="Button Link" position="top"> + <DxcButtonLink label="Button Link" href="#not-visited" title="Button Link" /> + </DxcTooltip> + </DxcInset> + </ExampleContainer> + </> +); + +type Story = StoryObj<typeof DxcButtonLink>; + +export const Chromatic: Story = { + render: ButtonLink, +}; + +export const ButtonLinkTooltip: Story = { + render: Tooltip, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const buttonLink = await canvas.findByRole("link"); + await userEvent.hover(buttonLink); + }, +}; + +export const NestedButtonLinkTooltip: Story = { + render: NestedTooltip, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const buttonLink = await canvas.findByRole("link"); + await userEvent.hover(buttonLink); + }, +}; diff --git a/packages/lib/src/button-link/ButtonLink.test.tsx b/packages/lib/src/button-link/ButtonLink.test.tsx new file mode 100644 index 000000000..01394a76f --- /dev/null +++ b/packages/lib/src/button-link/ButtonLink.test.tsx @@ -0,0 +1,87 @@ +import "@testing-library/jest-dom"; +import { createRef } from "react"; +import { render, screen, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import DxcButtonLink from "./ButtonLink"; + +global.ResizeObserver = jest.fn().mockImplementation(() => ({ + observe: jest.fn(), + unobserve: jest.fn(), + disconnect: jest.fn(), +})); + +describe("ButtonLink component tests", () => { + test("Calls correct function on click", async () => { + const onClick = jest.fn(); + const { getByText, getByRole } = render(<DxcButtonLink label="Button Link" href="#" onClick={onClick} />); + const buttonLink = getByText("Button Link"); + await userEvent.click(buttonLink); + expect(onClick).toHaveBeenCalled(); + expect(getByRole("button")).toBeTruthy(); + }); + test("Check button Link href and role attributes", () => { + const { getByRole } = render(<DxcButtonLink label="Button Link" href="www.test.com" />); + expect(getByRole("link")).toBeTruthy(); + expect(getByRole("link")).toHaveAttribute("href", "www.test.com"); + }); + test("Href works as a disabled button", () => { + const { getByRole } = render(<DxcButtonLink label="Button Link" href="www.test.com" disabled />); + const buttonLink = getByRole("link"); + expect(buttonLink).not.toHaveAttribute("href"); + expect(buttonLink).toHaveAttribute("aria-disabled", "true"); + }); + test("ButtonLink onClick does not fire when disabled", async () => { + const onClick = jest.fn(); + const { getByText } = render(<DxcButtonLink label="Button Link" href="#" onClick={onClick} disabled />); + const buttonLink = getByText("Button Link"); + await userEvent.click(buttonLink); + expect(onClick).not.toHaveBeenCalled(); + }); + test("Opens in the same window by default and in a new one with newWindow", () => { + const { getByRole, rerender } = render(<DxcButtonLink label="Button Link" href="#" />); + expect(getByRole("link")).toHaveAttribute("target", "_self"); + rerender(<DxcButtonLink label="Button Link" href="#" newWindow />); + expect(getByRole("link")).toHaveAttribute("target", "_blank"); + }); + test("Uses tabIndex 0 by default, the provided value otherwise, and -1 when disabled", () => { + const { getByRole, rerender } = render(<DxcButtonLink label="Button Link" href="#" />); + expect(getByRole("link")).toHaveAttribute("tabindex", "0"); + rerender(<DxcButtonLink label="Button Link" href="#" tabIndex={3} />); + expect(getByRole("link")).toHaveAttribute("tabindex", "3"); + rerender(<DxcButtonLink label="Button Link" href="#" tabIndex={3} disabled />); + expect(getByRole("link")).toHaveAttribute("tabindex", "-1"); + }); + test("Uses the label as aria-label and falls back to the title when there is no label", () => { + const { getByRole, rerender } = render(<DxcButtonLink label="Button Link" href="#" title="Go home" />); + expect(getByRole("link")).toHaveAttribute("aria-label", "Button Link"); + rerender(<DxcButtonLink href="#" icon="home" title="Go home" />); + expect(getByRole("link")).toHaveAttribute("aria-label", "Go home"); + }); + test("Renders string icons as a Material Symbol and SVG icons as provided", () => { + const { container, rerender } = render(<DxcButtonLink label="Button Link" href="#" icon="home" />); + expect(container.querySelector('[role="img"]')).toBeInTheDocument(); + rerender(<DxcButtonLink label="Button Link" href="#" icon={<svg data-testid="custom-icon" />} />); + expect(container.querySelector('[data-testid="custom-icon"]')).toBeInTheDocument(); + }); + test("Forwards the ref to the anchor element", () => { + const ref = createRef<HTMLAnchorElement>(); + const { getByRole } = render(<DxcButtonLink label="Button Link" href="#" ref={ref} />); + expect(ref.current).toBe(getByRole("link")); + }); + test("Shows the title as a tooltip on hover when enabled", async () => { + const user = userEvent.setup(); + const { getByRole } = render(<DxcButtonLink label="Button Link" href="#" title="Button tooltip" />); + await user.hover(getByRole("link")); + expect(await screen.findByRole("tooltip", { name: "Button tooltip" })).toBeInTheDocument(); + }); + test("Does not show the title tooltip when disabled", async () => { + const user = userEvent.setup(); + const { getByRole, queryByRole } = render( + <DxcButtonLink label="Button Link" href="#" title="Button tooltip" disabled /> + ); + await user.hover(getByRole("link")); + await waitFor(() => { + expect(queryByRole("tooltip")).toBeFalsy(); + }); + }); +}); diff --git a/packages/lib/src/button-link/ButtonLink.tsx b/packages/lib/src/button-link/ButtonLink.tsx new file mode 100644 index 000000000..dcfb8ad11 --- /dev/null +++ b/packages/lib/src/button-link/ButtonLink.tsx @@ -0,0 +1,96 @@ +import styled from "@emotion/styled"; +import DxcIcon from "../icon/Icon"; +import ButtonLinkProps from "./types"; +import type { ButtonMode, ButtonSize } from "../button/types"; +import { getHeight, widths } from "../button/utils"; +import { getButtonLinkStyles } from "./utils"; +import { Tooltip } from "../tooltip/Tooltip"; + +const ButtonLink = styled.a<{ + iconPosition: ButtonLinkProps["iconPosition"]; + disabled: ButtonLinkProps["disabled"]; + size: ButtonSize; + $mode: ButtonMode; + iconOnly: boolean; +}>` + cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")}; + text-decoration: none; + display: inline-flex; + align-items: center; + justify-content: center; + flex-direction: ${({ iconPosition }) => (iconPosition === "after" ? "row" : "row-reverse")}; + gap: ${({ size }) => + size.height === "medium" || size.height === "small" ? "var(--spacing-gap-xs)" : "var(--spacing-gap-s)"}; + height: ${({ size }) => getHeight(size.height)}; + width: ${(props) => (props.size.width ? widths[props.size?.width] : "fit-content")}; + + ${(props) => getButtonLinkStyles(props.disabled, props.$mode, props.size)}; + ${({ size, iconOnly }) => { + switch (size.height) { + case "small": + return `padding: var(--spacing-padding-none) var(${iconOnly ? "--spacing-padding-xxs" : "--spacing-padding-xs"});`; + case "medium": + return "padding: var(--spacing-padding-none) var(--spacing-padding-xs)"; + case "large": + return `padding: var(--spacing-padding-none) var(${iconOnly ? "--spacing-padding-xs" : "--spacing-padding-m"});`; + default: + return `padding: var(--spacing-padding-none) var(${iconOnly ? "--spacing-padding-xs" : "--spacing-padding-m"});`; + } + }}; +`; + +const IconContainer = styled.div<{ + size: ButtonSize; +}>` + display: flex; + font-size: ${({ size }) => + size.height === "medium" || size.height === "small" ? "var(--height-xxs)" : "var(--height-s)"}; + svg { + height: ${({ size }) => + size.height === "medium" || size.height === "small" ? "var(--height-xxs)" : "var(--height-s)"}; + width: ${({ size }) => (size.height === "medium" || size.height === "small" ? "16" : "24")}px; + } +`; + +const DxcButtonLink = ({ + disabled, + href, + icon, + iconPosition = "before", + label, + ariaLabel, + mode = "primary", + newWindow, + onClick, + size = { height: "large", width: "fitContent" }, + tabIndex = 0, + title, + ref, + ...otherProps +}: ButtonLinkProps) => ( + <Tooltip label={!disabled ? title : undefined}> + <ButtonLink + role={onClick ? "button" : "link"} + tabIndex={!disabled ? tabIndex : -1} + onClick={!disabled ? onClick : undefined} + href={!disabled && href ? href : undefined} + target={href ? (newWindow ? "_blank" : "_self") : undefined} + aria-disabled={disabled} + aria-label={ariaLabel || label || title} + disabled={disabled} + $mode={mode} + size={size} + iconPosition={iconPosition} + iconOnly={!label && !!icon} + ref={ref} + {...otherProps} + > + {label} + {icon && <IconContainer size={size}>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>} + </ButtonLink> + </Tooltip> +); + +DxcButtonLink.displayName = "DxcButtonLink"; + +export default DxcButtonLink; diff --git a/packages/lib/src/button-link/types.ts b/packages/lib/src/button-link/types.ts new file mode 100644 index 000000000..fd75b7009 --- /dev/null +++ b/packages/lib/src/button-link/types.ts @@ -0,0 +1,92 @@ +import { SVG } from "../common/types"; +import type { ButtonMode, ButtonSize } from "../button/types"; + +type CommonProps = { + /** + * If true, the link will be disabled. + */ + disabled?: boolean; + /** + * Page to be opened when the user clicks on the link. + */ + href: string; + /** + * Indicates the position of the icon in the component. + */ + iconPosition?: "before" | "after"; + /** + * The available button link modes. + */ + mode?: ButtonMode; + /** + * If true, the page is opened in a new browser tab. + */ + newWindow?: boolean; + /** + * If defined, the link will be displayed as a button. This + * function will be called when the user clicks the link. + */ + onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void; + /** + * Ref of the link element. + */ + ref?: React.Ref<HTMLAnchorElement>; + /** + * Size of the component. + */ + size?: ButtonSize; + /** + * Value of the tabindex. + */ + tabIndex?: number; + /** + * Text to be displayed as a tooltip when hovering over the link. + * If there is no aria-label or label, the title will be used as the aria-label. + */ + title?: string; +}; + +type LabelProps = { + /** + * Material Symbol name or SVG element as the icon that will be placed next to the link text. + */ + icon?: string | SVG; + /** + * Text to be placed in the button link. + */ + label: string; + /** + * Text to be used as aria-label for the button link. If provided, it takes precedence over the label as the accessible name. + */ + ariaLabel?: string; +}; + +type IconProps = { + /** + * Material Symbol name or SVG element as the icon that will be placed next to the link text. + */ + icon: string | SVG; + /** + * Text to be placed in the button link. + */ + label?: string; +} & ( + | { + /** + * Text to be displayed as a tooltip when hovering over the link. Required when no ariaLabel is provided. + */ + title: string; + ariaLabel?: string; + } + | { + /** + * Text to be used as aria-label for the button link. Required when no title is provided. + */ + ariaLabel: string; + title?: string; + } +); + +export type ButtonLinkProps = CommonProps & (LabelProps | IconProps); + +export type { ButtonLinkProps as default }; diff --git a/packages/lib/src/button-link/utils.ts b/packages/lib/src/button-link/utils.ts new file mode 100644 index 000000000..a8db82dae --- /dev/null +++ b/packages/lib/src/button-link/utils.ts @@ -0,0 +1,101 @@ +import type { ButtonMode, ButtonSize } from "../button/types"; + +export const getButtonLinkStyles = (disabled: boolean | undefined, mode: ButtonMode, size: ButtonSize) => { + const commonStyles = ` + font-family: var(--typography-font-family); + font-size: var(${size.height === "medium" || size.height === "small" ? "--typography-label-m" : "--typography-label-l"}); + font-weight: var(--typography-label-semibold); + border: var(--border-width-none) var(--border-style-default) transparent; + border-radius: var(--border-radius-s); + ${ + !disabled + ? `&:focus { + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); + outline-offset: -2px; + }` + : "" + } + `; + + if (mode === "primary") { + if (disabled) { + return `${commonStyles} + color: var(--color-fg-primary-light); + background-color: var(--color-bg-primary-lightest);`; + } + + return `${commonStyles} + color: var(--color-fg-neutral-bright); + background-color: var(--color-bg-primary-stronger); + &:hover { + background-color: var(--color-bg-primary-strongest); + } + &:active { + background-color: var(--color-bg-primary-strongest); + } + &:visited { + background-color: var(--color-bg-primary-strongest); + } + &:visited:hover, + &:visited:active { + background-color: var(--color-bg-primary-stronger); + }`; + } + + if (mode === "secondary") { + if (disabled) { + return `${commonStyles} + background-color: transparent; + border: var(--border-width-s) var(--border-style-default) var(--border-color-primary-lighter); + color: var(--color-fg-primary-light);`; + } + + return `${commonStyles} + background-color: transparent; + border: var(--border-width-s) var(--border-style-default) var(--border-color-primary-stronger); + color: var(--color-fg-primary-stronger); + &:hover { + background-color: var(--color-bg-primary-stronger); + color: var(--color-fg-neutral-bright); + } + &:active { + border-color: transparent; + background-color: var(--color-bg-primary-stronger); + color: var(--color-fg-neutral-bright); + } + &:visited { + border-color: var(--border-color-primary-stronger); + color: var(--color-fg-primary-strongest); + } + &:visited:hover, + &:visited:active { + background-color: var(--color-bg-primary-stronger); + color: var(--color-fg-neutral-bright); + }`; + } + + if (disabled) { + return `${commonStyles} + background-color: transparent; + color: var(--color-fg-primary-light);`; + } + + return `${commonStyles} + background-color: transparent; + color: var(--color-fg-primary-stronger); + &:hover { + background-color: var(--color-bg-primary-lighter); + } + &:active { + border-color: transparent; + background-color: var(--color-bg-primary-light); + } + &:visited { + color: var(--color-fg-primary-strongest); + } + &:visited:hover, + &:visited:active { + background-color: var(--color-bg-primary-lighter); + color: var(--color-fg-primary-strongest); + }`; +}; diff --git a/packages/lib/src/button/utils.ts b/packages/lib/src/button/utils.ts index eb456be40..a25c684bb 100644 --- a/packages/lib/src/button/utils.ts +++ b/packages/lib/src/button/utils.ts @@ -203,7 +203,7 @@ export const getButtonStyles = ( } }; -const widths = { +export const widths = { small: "42px", medium: "120px", large: "240px", diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts index 3d943d9b8..aca8bf781 100644 --- a/packages/lib/src/index.ts +++ b/packages/lib/src/index.ts @@ -10,6 +10,7 @@ export { default as DxcBleed } from "./bleed/Bleed"; export { default as DxcBreadcrumbs } from "./breadcrumbs/Breadcrumbs"; export { default as DxcBulletedList } from "./bulleted-list/BulletedList"; export { default as DxcButton } from "./button/Button"; +export { default as DxcButtonLink } from "./button-link/ButtonLink"; export { default as DxcCard } from "./card/Card"; export { default as DxcCheckbox } from "./checkbox/Checkbox"; export { default as DxcChip } from "./chip/Chip";