> Atom Element: SUI Tag
npm install @s-ui/react-atom-tag> Atom Element: SUI Tag
We use tags to visually emphasise features of the UI and make recognition and interaction easier.
``sh`
npm install @s-ui/react-atom-tag --save
`js
import AtomTag from '@s-ui/react-atom-tag'
`
Tags structure can have 3 main sizes: Small, medium (default) and large. You can use this prop size to modify it.
small | medium (default) | large
`js
size="small"
/>
size="medium"
/>
size="large"
/>
`
Tags structure can have 2 designs: Solid (default) and outline. You can use this prop design to modify it.
solid (default) | outline
`js
design="solid"
/>
design="outline"
/>
`
Actionable tags can be used as an anchor. Same as to define an interactivity with the component.
`js
onClick={() => alert('click!')}
/>
label="Anchor Tag"
target="_blank"
/>
`
Tags can include an action icon (generally a close icon). This icon will always be located to the right of content. You can add use the icon and closeIcon to added a icon.
`js`
Use the responsive true for make responsive layout. keep large size in mobile.
`js`
Use the type in order to color it as desired from a high order component.
If you want to customize your tag you can pass a prop to identify this type and you also need to set your custom set of types in Sass:
Your theme file (Sass)
`css`
$atom-tag-types: (
"alert": (
bgc: red,
c: white
),
"warning": (
bgc: orange,
c: white
)
);
Use the prop value if you want to use this value on your onClick/onClose handler.
`js`
onClick={(_, {value}) => alert('click! this is my value', value)}
value={42}
/>
The onClose event is triggered when the passed closeIcon is clicked.label
It receives the native event as first argument and an object with the passed and value as second argument.
`js`
value={42}
onClose={(_, {value, label}) => alert('Click! These are my value and label', {value, label})}
closeIcon={
/>
Your high order component
`js``
Find full description and more examples in the demo page.