Tag

Version 0.9.0-next.31 for Svelte Kit ^1.0.1

Tag

The tag is a good way to accent what would be a text element. For example the status of something.



Props


label string
The text inside of that tag that the user will see.

color string primary-light
Pass a color variable

color_options Array<{label: String, color: String}> []
Often you may want to change the color of your tag depending on the label. Instead of passing in a color, you can pass in an array of options. If there is no match, it will default to the color property.

small boolean false
A boolean to make the tag small. By default this is false but is helpful if you are using it inline with text like in a Table.

min_width number 3
Will make sure the tag maintains a minimum width value since cause the contents of the tag are very sort. You can pass a value in rem values. The default is 3.

margin string 0 0 0 0
You can set margins for the tag using the css shorthand method. By default the top, right, bottom, and left values are set to 0 0 0 0

Regular Colors
primary secondary error warning success info gray dark No Color tooltip OPTIONS Button
Light Colors
primary-lighter secondary-lighter error-lighter warning-lighter success-lighter info-lighter gray-lighter dark-lighter
Dark Colors
primary-darker secondary-darker error-darker warning-darker success-darker info-darker gray-darker dark-darker 
<script>
  //Tag contents can be set with a label prop or just adding the content into the tag slot
  import { Card, Tag } from "bubbles-ui";
</script>

<Card>
  <CardHeader title="Regular Colors" border={false} />

  <Tag color="primary" margin="1rem 0 1rem 0">primary</Tag>
  <Tag color="secondary" margin="1rem 0 1rem 0">secondary</Tag>
  <Tag color="error" margin="1rem 0 1rem 0">error</Tag>
  <Tag color="warning" margin="1rem 0 1rem 0">warning</Tag>
  <Tag color="success" margin="1rem 0 1rem 0">success</Tag>
  <Tag color="info" margin="1rem 0 1rem 0">info</Tag>
  <Tag color="gray" margin="1rem 0 1rem 0">gray</Tag>
  <Tag color="dark" margin="1rem 0 1rem 0">dark</Tag>
</Card>

<Card>
  <CardHeader title="Light Colors" border={false} />

  <Tag color="primary-light" label="primary-light" margin="1rem 0 1rem 0" />
  <Tag color="secondary-light" label="secondary-light" margin="1rem 0 1rem 0" />
  <Tag color="error-light" label="error-light" margin="1rem 0 1rem 0" />
  <Tag color="warning-light" label="warning-light" margin="1rem 0 1rem 0" />
  <Tag color="success-light" label="success-light" margin="1rem 0 1rem 0" />
  <Tag color="info-light" label="info-light" margin="1rem 0 1rem 0" />
  <Tag color="gray-light" label="gray-light" margin="1rem 0 1rem 0" />
  <Tag color="dark-light" label="dark-light" margin="1rem 0 1rem 0" />
</Card>

<Card>
  <CardHeader title="Border Colors" border={false} />

  <Tag color="primary-border" label="primary-border" margin="1rem 0 1rem 0" />
  <Tag color="secondary-border" label="secondary-border" margin="1rem 0 1rem 0" />
  <Tag color="error-border" label="error-border" margin="1rem 0 1rem 0" />
  <Tag color="warning-border" label="warning-border" margin="1rem 0 1rem 0" />
  <Tag color="success-border" label="success-border" margin="1rem 0 1rem 0" />
  <Tag color="info-border" label="info-border" margin="1rem 0 1rem 0" />
  <Tag color="gray-border" label="gray-border" margin="1rem 0 1rem 0" />
  <Tag color="dark-border" label="dark-border" margin="1rem 0 1rem 0" />
</Card>