can't get Button.Aligner to work in a row

[b-graves]

I have been trying to use the Button.Aligner to make a ghost Button line up with the content above.

I have the following:

<View gap={4} paddingTop={5} paddingBottom={4}>
    <Title />
    </View>
    <View maxWidth="700px">
      <Text variant="body-3" color="neutral-faded">
        {' An initiative is a direction or goal you aim to pursue.'}
      </Text>
      <Text variant="body-3" color="neutral-faded">
        {
          "For example, '24-Hour Customer Support' or 'Reduce Carbon Emissions'."
        }
      </Text>
    </View>
    <InitiativeAddButtons initiative={initiative} />
  </View>

where InitiativeAddButtons looks like:

<View direction="row" gap={2}>
  {!initiative.description?.length && <AddButton entity="description" />}
  {!initiative.stakeholders?.length && (
    <AddButton entity="stakeholders" disabled />
  )}
  {!initiative.stakeholders?.length && (
    <AddButton entity="economic impact" disabled />
  )}
</View>

and AddButton looks like:

<Button.Aligner side={['start']}>
  <Button
    {...buttonProps}
    variant="ghost"
    icon={IconPlus}
    color="neutral"
    attributes={{
      style: { color: 'var(--rs-color-foreground-neutral-faded)' },
    }}
    size="small"
  >
    Add {entity}
  </Button>
</Button.Aligner>

however it does not align the first button with the content above:

Am I doing something wrong? Thanks!

Also side note, how would I go about making a new color variant of Button that is neutral faded rather than having to apply the colour in attributes/style like this?