Button

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>

Buttons are used where you want users to perform an action. They have different types, states and sizes, depending on their purpose and context.

The button hierarchy consists of three levels: Primary, Secondary and Tertiary buttons. All buttons have a variety of choices of content with text, icon and action.

In addition there is other types of buttons like floating action buttons (FAB),Ekstern lenke close buttonEkstern lenke og icon buttonEkstern lenke. ButtonGroupEkstern lenke makes sure that the padding between buttons is correct when two or more buttons provides the correct spacing when multiple buttons are displayed together.

Primary Button

Primary Button is our main button and is used for the most important actions on a page (call to action). There should only be one primary button on each page. This button is also used as a primary choice in combination with tertiary button when there is a need to choose between two different actions with different importance.

Secondary Button

This button is used for secondary actions on a page, and when you need to set up multiple choices at the same time. There may therefore be several variants of this button with different content on the same page.

Tertiary Button

This is used both to perform tertiary actions and for additional choices. It is also used as a secondary action in combination with primary button when there is a need to choose between two different actions with different importance.

Ghost button

Ghost Button is used where you do not want the outline of a button, but still need the functionality, states, etc. Ghost Button should only be used where other types of buttons are suitable. Typical examples can be secondary functionality in other components, clickable icons or texts.

The buttons are available in four distinct sizes, each with a specific height. The ‘Large’ button has a height of 54px, the ‘Medium’ button is 42px, the ‘Small’ button 36px, and the ‘ExtraSmall’ button measures 30px in height. ExtraSmall is mainly not used for Primary and Secondary buttons and only in special cases. Consult with a person in charge of the Design System if you are unsure.

All sizes are available in dynamic and compact variants. Dynamic should follow screen size or the size of the element it is in and has variable padding on the sides. Compact should follow the length of the content in the button and has fixed padding on both sides.

All sizes have left-aligned icon and text, and should always keep the height and fixed padding on both sides. There should always be 6px between text and icon.

The buttons have a Default, Focus, Hover, Active, Disabled and Loading state.

Remember that the content of the buttons should be easy to understand, so that the user can quickly perform the desired action. The text should therefore be short and concise. Icon(s) should be used sparingly and mainly when it can help the user understand the meaning of the button.