Skip to content
Home

Component Properties

Every Component has its own properties to make them work for a variety of cases. You may have a look at the table describing all the possibilities. Check out for example the Button Properties.

Naming

Both the properties- and event names should use camelCase to support a universal naming convention.

Large Buttons & Icons

Below are some examples. You can even modify them right away in the Browser.

Code Editor
<Button
  variant="secondary"
  text="Secondary Button"
  icon="chevron_right_medium"
  size="large"
/>
<Button icon="chevron_right" icon_size="medium" size="large" />

Extended example

Code Editor
const Wrapper = styled.div`
  .dnb-button {
    --button-width: 4rem;
    --button-height: 4rem;
    --button-border-radius: 2rem;
    svg {
      color: fuchsia;
    }
  }
`
const myHandler = () => alert('Hello')
render(
  <Wrapper>
    <Button
      variant="secondary"
      icon={hamburgerIcon}
      size="default"
      on_click={myHandler}
    />
    <Button variant="secondary" size="default" on_click={myHandler}>
      <Icon icon={hamburgerIcon} />
    </Button>
  </Wrapper>,
)