Using Grommet for HPE?See Tag examples and guidance.
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"
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"
The DOM tag or react component to use for the element.
string
The name of a component.
"div"
function
() => {}
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"
Click handler. If this property is specified the tag will be a button. This should not be used in conjunction with 'onRemove'.
function
() => {}
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
() => {}
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"
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.
Any box border settings.
boolean
true
false
string
{ xsmall: "1px", small: "2px", medium: "4px", large: "12px", xlarge: "24px", }
The amount of padding around the Box contents. May be overidden by size specific values below.
object
{ horizontal: "small", vertical: "xsmall", }
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"
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"
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"
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"
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"
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"