Indicator

Indicators are used to place an element on the corner of another element.

Components

The Indicator components include the following:

Indicator
IndicatorItem

Indicator

Indicator is the wrapping element that surrounds the parent item as well as the IndicatorItem. It supports a single prop:

Prop	Type	Description
`is`	string	Allows changing the element tag.

IndicatorItem

IndicatorItem can be customized with the following props:

Prop	Type	Description
`is`	string	Allows changing the element tag.
`align`	string	Allows setting the alignment to one of the below prop names.
`start`	boolean	Sets alignment to start.
`center`	boolean	Sets alignment to center.
`end`	boolean	Sets alignment to end.
`v-align`	string	Allows setting the vertical alignment to one of the below prop names.
`top`	boolean	Sets vertical alignment to top.
`middle`	boolean	Sets vertical alignment to middle.
`bottom`	boolean	Sets vertical alignment to bottom.

Empty Badge as Indicator

content

Code Example

<Indicator>
  <IndicatorItem>
    <Badge secondary />
  </IndicatorItem>
  <div class="grid w-32 h-32 bg-base-300 place-items-center">
    content
  </div>
</Indicator>

Badge as Indicator

new

content

Code Example

<Indicator>
  <IndicatorItem>
    <Badge primary>
      new
    </Badge>
  </IndicatorItem>
  <div class="grid w-32 h-32 bg-base-300 place-items-center">
    content
  </div>
</Indicator>

For a Button

99+

Code Example

<Indicator>
  <IndicatorItem>
    <Badge secondary>
      99+
    </Badge>
  </IndicatorItem>
  <Button>
    <Text uppercase>
      Inbox
    </Text>
  </Button>
</Indicator>

Button as Indicator for Card

Job Title

Rerum reiciendis beatae tenetur excepturi

Code Example

<Indicator>
  <IndicatorItem bottom>
    <Button primary>
      Apply
    </Button>
  </IndicatorItem>
  <Card class="border">
    <CardBody>
      <CardTitle is="h2">
        Job Title
      </CardTitle>
      <Text is="p">
        Rerum reiciendis beatae tenetur excepturi
      </Text>
    </CardBody>
  </Card>
</Indicator>

Centered Over Image

Uploading Image...

Code Example

<Indicator>
  <IndicatorItem center middle class="badge badge-accent">
    Uploading Image...
  </IndicatorItem>
  <img src="https://api.lorem.space/image/house?w=300&h=150">
</Indicator>

Multiple Indicators

top+start

top+center

top+end

middle+start

middle+center

middle+end

bottom+start

bottom+center

bottom+end

content

Code Example

<Indicator>
  <IndicatorItem center middle class="badge badge-accent">
    Uploading Image...
  </IndicatorItem>
  <img src="https://api.lorem.space/image/house?w=300&h=150">
</Indicator>

Prev Hero

Next Join