UikTag

Soloely used, the tags are display: inline-block, if you want to use multiple tags as a group, wrap it with UikTagContainer.

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

UikTag Examples

ComponentExample Code
Example
<UikTag>
  Example
</UikTag>
Example
<UikTag color="red">
  Example
</UikTag>
Example
<UikTag color="green" fill>
  Example
</UikTag>
Example
<UikTag color="orange">
  Example
</UikTag>
Example
<UikTag color="blue" fill>
  Example
</UikTag>