x
1
<span class="rpf-tag">Tag</span>
1
render(DesignSystem::TagComponent.new(text:, icon:, icon_position:, modifiers:))
Tag Component
DesignSystem::TagComponent.new(text: 'Hello', **attrs)
Produces a pill-shaped tag - useful for adding to tables, cards etc.
Options
text
: Text to render inside the tag. If this is empty, (and no content block is passed in) and an icon is given, the tag will render as an icon-only tagicon
: The name of the icon to use. See the Material Icons for options. You can use any of the icons listed on that page, just downcase the name and replace the spaces with underscores (e.g. 'Chevron Right' -> 'chevron_right').icon_position
: The position of the icon relative to the text. Options: ['left', 'right']. Defaults to 'left'.modifiers
: Additional classes to add to the component (gets appended to the end of the base class name). There are four ready-styled modifiers you can use: [error, information, success, warning], or use a custom modifier if you need custom classes. (optional)example:
DesignSystem::TagComponent.new(text: 'Hello World!')produces:
<span class="rpf-tag">Hello World!</span>It also accepts all the usual HTML attributes for a
span
tag, e.g.id
,class
,data-
etc.
Param | Description | Input |
---|---|---|
— |
|
|
Add a css modifier class. |
|
|
— |
|
|
The position of the icon relative to the text. Defaults to left. |
|