grommet
docs
components

Tag

a component to represent a textual tag

Storybook
CodeSandbox
Github

Using Grommet for HPE?See Tag examples and guidance.

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

string
"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

string
"start"
"center"
"end"
"stretch"
"baseline"

as

The DOM tag or react component to use for the element.

string

The name of a component.

"div"
function
() => {}

background

The background of the tag. Either a color identifier to use for the background color. For example: 'neutral-1'. Or, a 'url()' for an image. Dark is not needed if color is provided.

string

A color or image url.

"neutral-1"
"url(//my.com/assets/img.png)"
object

{
  color: "neutral-1",
  dark: true,
  opacity: true,
  position: "bottom",
  repeat: "no-repeat",
  size: "cover",
  image: "url(//my.com/assets/img.png)",
  clip: "text",
  rotate: 45
}
              
{ dark: "light-2", light: "dark-2" }
where opacity could be:
"weak"
"medium"
"strong"
true
where position could be:
any CSS for background-position
where repeat could be:
"no-repeat"
"repeat"
"string"
where size could be:
"cover"
"contain"
"string"
where clip could be:
"text"
"border-box"
"padding-box"
"content-box"

gridArea

The name of the area to place this inside a parent Grid.

string
"a parent grid area name"

name

Name text to place in the tag.

string
"name"

onClick

Click handler. If this property is specified the tag will be a button. This should not be used in conjunction with 'onRemove'.

function
() => {}

onRemove

If specified, the tag will include a remove button. This function will be called when the remove button is activated. This should not be used in conjunction with 'onClick'.

function
() => {}

size

The possible sizes of the Tag, that impacts the overall Tag padding, border radius, text size and line height.

string
"xsmall"
"small"
"medium"
"large"
"xlarge"
"string"

value

Value text to place in the tag.

string
"value"

React/DOM Properties

At its core, the Tag component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

tag.background

The background of the Tag.

string
"red"
object
{dark: "light-2", light: "dark-2"}

tag.border

Any box border settings.

boolean
true
false
string
{
  xsmall: "1px",
  small: "2px",
  medium: "4px",
  large: "12px",
  xlarge: "24px",
}

tag.icons.remove

The remove icon in the Tag.

object
FormClose
Trash

tag.name

Any valid Text props for the name.

object
{}
{ weight: 600 }

tag.pad

The amount of padding around the Box contents. May be overidden by size specific values below.

object
{
  horizontal: "small",
  vertical: "xsmall",
}

tag.round

How much to round the corners. May be overridden by a size-specific value below.

boolean
true
false
string
"large"
"xsmall"
"small"
"medium"
"large"
"xlarge"
"full"
"any CSS size"
object
{ size: "...", corner: "..." }
where corner could be:
"top"
"left"
"bottom"
"right"
"top-left"
"top-right"
"bottom-left"
"bottom-right"

tag.size.xsmall.pad

The pad

object
{
  horizontal: "8px",
  vertical: "xxsmall",
}

tag.size.xsmall.icon

The remove icon properties

object
{
  size: "18px",
}

tag.size.xsmall.remove.size

The size of the remove button.

string
"large"

tag.size.xsmall.remove.margin

How much margin around the remove button.

string
string
"none"
"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"
object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}

tag.size.xsmall.round

How much to round the corners.

boolean
true
false
string
"large"
"xsmall"
"small"
"medium"
"large"
"xlarge"
"full"
"any CSS size"
object
{ size: "...", corner: "..." }
where corner could be:
"top"
"left"
"bottom"
"right"
"top-left"
"top-right"
"bottom-left"
"bottom-right"

tag.size.small.pad

The pad for size small.

object
{
  horizontal: "10px",
  vertical: "xxsmall",
}

tag.size.small.icon

The remove icon properties

object
{
  size: "18px",
}

tag.size.small.round

How much to round the corners.

boolean
true
false
string
"large"
"xsmall"
"small"
"medium"
"large"
"xlarge"
"full"
"any CSS size"
object
{ size: "...", corner: "..." }
where corner could be:
"top"
"left"
"bottom"
"right"
"top-left"
"top-right"
"bottom-left"
"bottom-right"

tag.size.small.remove.size

The size of the remove button.

string
"large"

tag.size.small.remove.margin

How much margin around the remove button.

string
string
"none"
"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"
object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}

tag.size.medium.pad

The pad

object
{
  horizontal: "12px",
  vertical: "xsmall",
}

tag.size.medium.icon

The remove icon properties

object
{
  size: "medium",
}

tag.size.medium.round

How much to round the corners.

boolean
true
false
string
"large"
"xsmall"
"small"
"medium"
"large"
"xlarge"
"full"
"any CSS size"
object
{ size: "...", corner: "..." }
where corner could be:
"top"
"left"
"bottom"
"right"
"top-left"
"top-right"
"bottom-left"
"bottom-right"

tag.size.medium.remove.size

The size of the remove button.

string
"large"

tag.size.medium.remove.margin

How much margin around the remove button.

string
string
"none"
"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"
object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}

tag.size.large.pad

The pad

object
{
  horizontal: "16px",
  vertical: "xsmall",
}

tag.size.large.icon

The remove icon properties

object
{
  size: "30px",
}

tag.size.large.round

How much to round the corners.

boolean
true
false
string
"large"
"xsmall"
"small"
"medium"
"large"
"xlarge"
"full"
"any CSS size"
object
{ size: "...", corner: "..." }
where corner could be:
"top"
"left"
"bottom"
"right"
"top-left"
"top-right"
"bottom-left"
"bottom-right"

tag.size.large.remove.size

The size of the remove button.

string
"large"

tag.size.large.remove.margin

How much margin around the remove button.

string
string
"none"
"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"
object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}

tag.size.xlarge.pad

The pad

object
{
  horizontal: "18px",
  vertical: "xsmall",
}

tag.size.xlarge.icon

The remove icon properties

object
{
  size: "36px",
}

tag.size.xlarge.round

How much to round the corners.

boolean
true
false
string
"large"
"xsmall"
"small"
"medium"
"large"
"xlarge"
"full"
"any CSS size"
object
{ size: "...", corner: "..." }
where corner could be:
"top"
"left"
"bottom"
"right"
"top-left"
"top-right"
"bottom-left"
"bottom-right"

tag.size.xlarge.remove.size

The size of the remove button.

string
"large"

tag.size.xlarge.remove.margin

How much margin around the remove button.

string
string
"none"
"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"
object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}

tag.remove

Any valid Button props for the remove button.

object
{
  margin: {
    right: "xsmall"
  }
}
{
  kind: 'default',
}

tag.separator

The separator text between the 'name' and 'value' text.

string
":"

tag.value

Any valid Text props for the value.

object
{ weight: 600 }