Guidelines
Card selects are buttons that trigger an "overlay card," which appears on top of other content. They are used to hide and reveal information and can be utilized to trigger contextual menus or display arbitrary information. This helps keep the design clean, making it easier to navigate and establish a clear hierarchy for the flow of information.
Examples of use include larger menus or situations where users need a clear overview on an information-dense page.
Card selects come in three variants: Core, Ghost, and Floating. In their default states, Core has a shadow, Outline has a stroke, and Ghost appears only as text. All three variants can include a chevron and one or two icons. In many cases, it is advisable to limit the use of icons, while the chevron is often useful when revealing new content.
Card selects are available in small, medium, and large sizes and are designed in four states.
Code
<Menu />
import { Menu } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | Children should contain CardSelectTrigger and CardSelectContent | |
open | boolean | ||
onOpenChange | (details: OpenChangeDetails) => void | ||
positioning | PositioningOptions | Decides the placement of the menu. Example: {{ placement: "right-start" }} |
<CardSelectTrigger />
import { CardSelectTrigger } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | Content of triggerButton | |
variant | "core" | "ghost" | "floating" | Defaults to "core" | |
icon | React.ReactNode | Icon to be shown on the left side of trigger | |
withChevron | boolean | Wether or not to show chevron on right side of trigger |
<CardSelectContent />
import { CardSelectContent } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | Content of the card |