Site settings
Change the appearance of the site to suit your preferences
Button
Buttons are the most basic interaction element in a user interface, as they allow users to perform actions or navigate the interface. They have multiple styles for various needs and let you do an action or navigation on the site.
A simple example
<Button variant="primary" size="md"> Click me </Button>
Different variants
<ButtonGroup flexWrap="wrap" gap={2} spacing={0}> <Button variant="primary" size="md" > Primary </Button> <Button variant="secondary" size="md" > Secondary </Button> <Button variant="tertiary" size="md" > Tertiary </Button> <Button variant="ghost" size="md" > Ghost </Button> <Button variant="floating" size="md" > Floating </Button> </ButtonGroup>
Different sizes
<Flex gap={1} flexWrap="wrap" alignItems="center"> <Button variant="primary" size="lg">Size lg</Button> <Button variant="primary" size="md">Size md</Button> <Button variant="primary" size="sm">Size sm</Button> <Button variant="primary" size="xs">Size xs</Button> </Flex>
Responsive size button
<Button variant="primary" size={{ base: "sm", xl: "lg" }}> Click me </Button>
Buttons with icons
<Flex gap={1} flexWrap="wrap" alignItems="center"> <Button variant="primary" leftIcon={<SearchOutline24Icon />}> Search </Button> <Button variant="primary" rightIcon={<DropdownDownFill24Icon />} width="100%"> Look more </Button> <Button variant="primary" leftIcon={<SearchOutline24Icon />} rightIcon={<DropdownDownFill24Icon />} maxWidth="400px" width="100%" > Such flex </Button> </Flex>
A button in loading mode
<Button variant="primary" loading>Vennligst vent</Button>
You can use the asChild prop to create a link that looks like a button
<Button asChild variant="primary" leftIcon={<TrainOutline24Icon />}> <a href="https://vy.no/" target="_blank"> Take me to vy.no </a> </Button>
A disabled button
<Button variant="primary" disabled> Submit </Button>