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 are using snake case to support a universal naming convention, with a background and requirement on supporting Web Components.

Large Buttons & Icons

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

<Button

  variant="secondary"

  text="Secondary Button"

  icon="chevron_right_medium"

  size="large"

/>

<Button

  icon="chevron_right"

  icon_size="medium"

  size="large"

/>

Extended example

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>

)

Web Components and properties

What if a property has to change at runtime?

Changing a property (props) at runtime is a common thing in React. But also @dnb/eufemia web components support prop changes. Keep in mind that not all components are tested to the last detail. So, if you come over some special use cases, please contribute back and make a pull request.

const Component = () => {

  const time = new Date().toLocaleTimeString()

  React.useEffect(() => {

    Button.enableWebComponent()

  }, [])

  return (

    <dnb-input

      label="Web Component property updates:"

      value={time}

    ></dnb-input>

  )

}

const RenderHelper = () => {

  React.useEffect(() => {

    const timer = setInterval(() => render(<RenderHelper />), 1e3)

    return () => clearInterval(timer)

  }, [])

  return <Component />

}

render(<RenderHelper />)