UikTagContainer

Wraps tags UikTag and adds some extra properties like margins between them.

PropertyTypeRequiredDefault ValueDescription
childrenReact.Nodefalsenull
classNameStringfalsenullclassName, e.g. "my-custom-styling"
colorStringfalseOne of 'white' | 'red' | 'orange' | 'blue' | 'yellow' | 'green' | 'violet'. Check the styleguide for more information.
ComponentReact.ElementTypefalse"span"Renders the component with a given react element. By default, the component renders <span />. This is usefull when you want to use a same style but render a different HTML element or your custom component. Read and see more examples here.
fillBooleanfalsefalseBy default, tags are outlined, use this property to fill the colors.
...restanyfalseOther properties are passed down to the wrapping element

UikTagContainer Examples

ComponentExample Code
Red Is goodBlue as wellOrange is a fruit

<UikTagContainer>
  <UikTag
    color="red"
    fill
  >
    Red Is good
  </UikTag>
  <UikTag
    color="blue"
    fill
  >
    Blue as well
  </UikTag>
  <UikTag
    color="orange"
    fill
  >
    Orange is a fruit
  </UikTag>
</UikTagContainer>